147 lines
4.3 KiB
HTML
147 lines
4.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>highlight.js test</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="explicit-language">
|
||
|
|
|
||
|
|
<!-- explicit language (code) -->
|
||
|
|
<pre><code class="python">for x in [1, 2, 3]:
|
||
|
|
count(x)</code></pre>
|
||
|
|
|
||
|
|
<!-- explicit language (pre) -->
|
||
|
|
<pre class="python"><code>for x in [1, 2, 3]:
|
||
|
|
count(x)</code></pre>
|
||
|
|
|
||
|
|
<!-- html 5 style language class -->
|
||
|
|
<pre><code class="language-python">for x in [1, 2, 3]:
|
||
|
|
count(x)</code></pre>
|
||
|
|
|
||
|
|
<!-- shortened language prefix -->
|
||
|
|
<pre><code class="lang-scss">@import "compass/reset";
|
||
|
|
$colorGreenDark: darken($colorGreen, 10);
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
<!-- uppercase symbols -->
|
||
|
|
<pre><code class="SCSS">@import "compass/reset";
|
||
|
|
$colorGreenDark: darken($colorGreen, 10);
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="custom-markup">
|
||
|
|
|
||
|
|
<!-- tab replacement -->
|
||
|
|
<pre><code class="python">for x in [1, 2, 3]:
|
||
|
|
count(x)</code></pre>
|
||
|
|
|
||
|
|
<!-- custom markup -->
|
||
|
|
<pre><code class="html"><<a href="http://dev.w3.org/html5/spec/Overview.html#the-div-element">div</a> id="contents">
|
||
|
|
<del><p>Hello, World!</del><!-- A comment should not break merging --><ins>Goodbye, cruel world!</ins>
|
||
|
|
</div>
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
<!-- custom markup and tab replacement -->
|
||
|
|
<pre><code class="python">for x in [1, 2, 3]:
|
||
|
|
<span style="background:yellow"> </span>count(x)
|
||
|
|
if x == 3:
|
||
|
|
<span style="background:yellow"> </span>count(x + 1)</code></pre>
|
||
|
|
|
||
|
|
<!-- <br> inside of <pre>s -->
|
||
|
|
<pre><code class="language-javascript">>> '\x41\x42\x43'<br>'ABC'<br><hr><br>>> '\x61\x62\x63'<br>'abc'
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="language-alias">
|
||
|
|
|
||
|
|
<!-- language alias -->
|
||
|
|
<pre><code class="language-js">var x = '<p>this should <b>not</b> be highlighted as <em>HTML</em>';</code></pre>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="no-highlight">
|
||
|
|
|
||
|
|
<!-- disable highlighting -->
|
||
|
|
<pre><code class="nohighlight"><div id="contents">
|
||
|
|
<p>Hello, World!
|
||
|
|
</div></code></pre>
|
||
|
|
<pre><code class="no-highlight"><div id="contents">
|
||
|
|
<p>Hello, World!
|
||
|
|
</div></code></pre>
|
||
|
|
<pre><code class="plain"><div id="contents">
|
||
|
|
<p>Hello, World!
|
||
|
|
</div></code></pre>
|
||
|
|
<pre><code class="text"><div id="contents">
|
||
|
|
<p>Hello, World!
|
||
|
|
</div></code></pre>
|
||
|
|
|
||
|
|
<!-- non-code <pre> -->
|
||
|
|
<pre><samp>Computer output</samp></pre>
|
||
|
|
|
||
|
|
<!-- unsupported language-prefixed class -->
|
||
|
|
<pre><code class="language-foo">for x in [1, 2, 3]: count(x)</code></pre>
|
||
|
|
|
||
|
|
<!-- unsupported shortened language-prefixed class -->
|
||
|
|
<pre><code class="lang-foo">for x in [1, 2, 3]: count(x)</code></pre>
|
||
|
|
|
||
|
|
<!-- unsupported prefixed language and supported unprefixed language -->
|
||
|
|
<pre><code class="python language-foo">for x in [1, 2, 3]: count(x)</code></pre>
|
||
|
|
|
||
|
|
<!-- class name with no highlighting keyword (eg: 'plain' or 'text') -->
|
||
|
|
<pre><code class="text-content javascript">var x = 'foo';</code></pre>
|
||
|
|
<pre><code class="clipboard-text javascript">var x = 'foo';</code></pre>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- sub-languages -->
|
||
|
|
<pre><code id="sublanguages" class="php-html"><? echo 'php'; /* ?> */ ?>
|
||
|
|
<body>
|
||
|
|
<script>document.write('Legacy code');</script>
|
||
|
|
</body>
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
<div id="build-classname">
|
||
|
|
|
||
|
|
<!-- add class name -->
|
||
|
|
<pre><code class=" some-class "><?xml version="1.0"?>
|
||
|
|
<response value="ok" xml:lang="en"></response></code></pre>
|
||
|
|
|
||
|
|
<!-- do not clutter class name first -->
|
||
|
|
<pre><code class="hljs some-class "><?xml version="1.0"?>
|
||
|
|
<response value="ok" xml:lang="en"></response></code></pre>
|
||
|
|
|
||
|
|
<!-- do not clutter class name last -->
|
||
|
|
<pre><code class=" some-class hljs"><?xml version="1.0"?>
|
||
|
|
<response value="ok" xml:lang="en"></response></code></pre>
|
||
|
|
|
||
|
|
<!-- do not clutter class name spaces around-->
|
||
|
|
<pre><code class=" hljs some-class "><?xml version="1.0"?>
|
||
|
|
<response value="ok" xml:lang="en"></response></code></pre>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="use-br">
|
||
|
|
|
||
|
|
<div class="code xml"><head><br> <meta charset="utf-8"><br> <title></title><br></head></div>
|
||
|
|
|
||
|
|
<div class="code xml"><head><br>
|
||
|
|
<meta charset="utf-8"><br>
|
||
|
|
<title></title><br>
|
||
|
|
</head></div>
|
||
|
|
|
||
|
|
<div class="code xml"><head><br>
|
||
|
|
<meta charset="utf-8"><br/>
|
||
|
|
<title></title><br />
|
||
|
|
</head></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<pre id="ends-with-parent-variants"><code class="language-nested">( [ ( ) ] )</code></pre>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|