index.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>highlight.js test</title>
  6. </head>
  7. <body>
  8. <div id="explicit-language">
  9. <!-- explicit language (code) -->
  10. <pre><code class="python">for x in [1, 2, 3]:
  11. count(x)</code></pre>
  12. <!-- explicit language (pre) -->
  13. <pre class="python"><code>for x in [1, 2, 3]:
  14. count(x)</code></pre>
  15. <!-- html 5 style language class -->
  16. <pre><code class="language-python">for x in [1, 2, 3]:
  17. count(x)</code></pre>
  18. <!-- shortened language prefix -->
  19. <pre><code class="lang-scss">@import "compass/reset";
  20. $colorGreenDark: darken($colorGreen, 10);
  21. </code></pre>
  22. <!-- uppercase symbols -->
  23. <pre><code class="SCSS">@import "compass/reset";
  24. $colorGreenDark: darken($colorGreen, 10);
  25. </code></pre>
  26. </div>
  27. <div id="custom-markup">
  28. <!-- tab replacement -->
  29. <pre><code class="python">for x in [1, 2, 3]:
  30. count(x)</code></pre>
  31. <!-- custom markup -->
  32. <pre><code class="html">&lt;<a href="http://dev.w3.org/html5/spec/Overview.html#the-div-element">div</a> id="contents"&gt;
  33. <del>&lt;p&gt;Hello, World!</del><!-- A comment should not break merging --><ins>Goodbye, cruel world!</ins>
  34. &lt;/div&gt;
  35. </code></pre>
  36. <!-- custom markup and tab replacement -->
  37. <pre><code class="python">for x in [1, 2, 3]:
  38. <span style="background:yellow"> </span>count(x)
  39. if x == 3:
  40. <span style="background:yellow"> </span>count(x + 1)</code></pre>
  41. <!-- <br> inside of <pre>s -->
  42. <pre><code class="language-javascript">&gt;&gt; '\x41\x42\x43'<br>'ABC'<br><hr><br>&gt;&gt; '\x61\x62\x63'<br>'abc'
  43. </code></pre>
  44. </div>
  45. <div id="language-alias">
  46. <!-- language alias -->
  47. <pre><code class="language-js">var x = '&lt;p&gt;this should &lt;b&gt;not&lt;/b&gt; be highlighted as &lt;em&gt;HTML&lt;/em&gt;';</code></pre>
  48. </div>
  49. <div id="no-highlight">
  50. <!-- disable highlighting -->
  51. <pre><code class="nohighlight">&lt;div id="contents"&gt;
  52. &lt;p&gt;Hello, World!
  53. &lt;/div&gt;</code></pre>
  54. <pre><code class="no-highlight">&lt;div id="contents"&gt;
  55. &lt;p&gt;Hello, World!
  56. &lt;/div&gt;</code></pre>
  57. <pre><code class="plain">&lt;div id="contents"&gt;
  58. &lt;p&gt;Hello, World!
  59. &lt;/div&gt;</code></pre>
  60. <pre><code class="text">&lt;div id="contents"&gt;
  61. &lt;p&gt;Hello, World!
  62. &lt;/div&gt;</code></pre>
  63. <!-- non-code <pre> -->
  64. <pre><samp>Computer output</samp></pre>
  65. <!-- unsupported language-prefixed class -->
  66. <pre><code class="language-foo">for x in [1, 2, 3]: count(x)</code></pre>
  67. <!-- unsupported shortened language-prefixed class -->
  68. <pre><code class="lang-foo">for x in [1, 2, 3]: count(x)</code></pre>
  69. <!-- unsupported prefixed language and supported unprefixed language -->
  70. <pre><code class="python language-foo">for x in [1, 2, 3]: count(x)</code></pre>
  71. <!-- class name with no highlighting keyword (eg: 'plain' or 'text') -->
  72. <pre><code class="text-content javascript">var x = 'foo';</code></pre>
  73. <pre><code class="clipboard-text javascript">var x = 'foo';</code></pre>
  74. </div>
  75. <!-- sub-languages -->
  76. <pre><code id="sublanguages" class="php-html">&lt;? echo 'php'; /* ?&gt; */ ?&gt;
  77. &lt;body&gt;
  78. &lt;script&gt;document.write('Legacy code');&lt;/script&gt;
  79. &lt;/body&gt;
  80. </code></pre>
  81. <div id="build-classname">
  82. <!-- add class name -->
  83. <pre><code class=" some-class ">&lt;?xml version="1.0"?&gt;
  84. &lt;response value="ok" xml:lang="en"&gt;&lt;/response&gt;</code></pre>
  85. <!-- do not clutter class name first -->
  86. <pre><code class="hljs some-class ">&lt;?xml version="1.0"?&gt;
  87. &lt;response value="ok" xml:lang="en"&gt;&lt;/response&gt;</code></pre>
  88. <!-- do not clutter class name last -->
  89. <pre><code class=" some-class hljs">&lt;?xml version="1.0"?&gt;
  90. &lt;response value="ok" xml:lang="en"&gt;&lt;/response&gt;</code></pre>
  91. <!-- do not clutter class name spaces around-->
  92. <pre><code class=" hljs some-class ">&lt;?xml version="1.0"?&gt;
  93. &lt;response value="ok" xml:lang="en"&gt;&lt;/response&gt;</code></pre>
  94. </div>
  95. <div id="use-br">
  96. <div class="code xml">&lt;head&gt;<br> &lt;meta charset="utf-8"&gt;<br> &lt;title&gt;&lt;/title&gt;<br>&lt;/head&gt;</div>
  97. <div class="code xml">&lt;head&gt;<br>
  98. &lt;meta charset="utf-8"&gt;<br>
  99. &lt;title&gt;&lt;/title&gt;<br>
  100. &lt;/head&gt;</div>
  101. <div class="code xml">&lt;head&gt;<br>
  102. &lt;meta charset="utf-8"&gt;<br/>
  103. &lt;title&gt;&lt;/title&gt;<br />
  104. &lt;/head&gt;</div>
  105. </div>
  106. <pre id="ends-with-parent-variants"><code class="language-nested">( [ ( ) ] )</code></pre>
  107. </body>
  108. </html>