developer.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>highlight.js developer</title>
  6. <link rel="stylesheet" href="../src/styles/default.css">
  7. <style>
  8. .editor textarea {
  9. display: block; width: 100%;
  10. height: 15em;
  11. }
  12. pre code,
  13. pre output {
  14. display: block;
  15. }
  16. pre output {
  17. display: block; overflow: auto;
  18. padding: 0.5em;
  19. background: #F0F0F0;
  20. }
  21. .hljs-debug {
  22. color: red; font-weight: bold;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <h1>highlight.js developer</h1>
  28. <div class="editor">
  29. <div>
  30. <textarea>Put code here…</textarea>
  31. <p>
  32. <button>Update highlighting</button>
  33. Language: <select class="languages"><option value="">(Auto)</option></select>
  34. </p>
  35. </div>
  36. <div>
  37. <p>Rendered in <span class="rendering_time">...</span> ms [<span class="rendering_stats">...</span>]</p>
  38. <pre><code class="hljs">...</code></pre>
  39. </div>
  40. <div>
  41. <p>Markup
  42. <pre><output>...</output></pre>
  43. </div>
  44. </div>
  45. <script src="../build/highlight.pack.js"></script>
  46. <script src="../demo/jquery-2.1.1.min.js"></script>
  47. <script>
  48. $(document).ready(function() {
  49. var select = $('.languages');
  50. hljs.listLanguages().forEach(function(l) {
  51. select.append('<option>' + l + '</option>');
  52. });
  53. $('.editor button').click(function(e) {
  54. var editor = $(this).parents('.editor');
  55. var language = editor.find('.languages').val();
  56. var source = editor.find('textarea').val();
  57. var start_time = +new Date();
  58. var result = hljs.getLanguage(language) ? hljs.highlight(language, source, true) : hljs.highlightAuto(source);
  59. var rendering_time = +new Date() - start_time;
  60. editor.find('.hljs').html(result.value);
  61. var rendering_stats = result.language + ': ' + (result.relevance || result.r);
  62. if (result.second_best) {
  63. rendering_stats += ', ' + result.second_best.language + ': ' + (result.second_best.relevance || result.second_best.r);
  64. }
  65. editor.find('.rendering_stats').text(rendering_stats);
  66. editor.find('.rendering_time').text(rendering_time);
  67. editor.find('output').text(result.value);
  68. SourceStore.save(source, language);
  69. });
  70. });
  71. var SourceStore;
  72. (function(){
  73. SourceStore = {
  74. save: function(source, lang){
  75. localStorage.setItem(key_SOURCE, source);
  76. localStorage.setItem(key_LANG, lang);
  77. },
  78. resolve: function(){
  79. return [
  80. localStorage.getItem(key_SOURCE),
  81. localStorage.getItem(key_LANG)
  82. ];
  83. }
  84. };
  85. var key_SOURCE = 'hljs-source';
  86. var key_LANG = 'hljs-lang';
  87. $(function(){
  88. var data = SourceStore.resolve();
  89. if (data == null) return;
  90. $('.editor textarea').val(data[0]);
  91. $('.editor .languages').val(data[1]);
  92. $('.editor button').click();
  93. });
  94. }());
  95. </script>
  96. </body>
  97. </html>