218 lines
5.6 KiB
HTML
218 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
|
||
<meta charset="utf-8" />
|
||
<title>Examples ▲ Prism</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
<link rel="stylesheet" href="prism.css" data-noprefix />
|
||
<script src="../prefixfree/prefixfree.min.js"></script>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>
|
||
|
||
<h2>Examples</h2>
|
||
<p>The examples in this page serve a dual purpose: They act as unit tests, making it easy to spot bugs, and at the same time demonstrate what Prism can do, on simple and on edge cases.</p>
|
||
</header>
|
||
|
||
<section class="language-markup">
|
||
<h1>Different markup</h1>
|
||
|
||
<h2>code.language-css</h2>
|
||
<code class="language-css">p { color: red; }</code>
|
||
|
||
<h2>pre.language-css > code</h2>
|
||
<pre class="language-css"><code>p { color: red; }</code></pre>
|
||
|
||
<h2>pre.language-css > code.language-*</h2>
|
||
<pre class="language-css"><code class="language-*">p { color: red; }</code></pre>
|
||
|
||
<h2>code.lang-css</h2>
|
||
<code class="lang-css">p { color: red; }</code>
|
||
|
||
<h2>pre.lang-css > code</h2>
|
||
<pre class="lang-css"><code>p { color: red; }</code></pre>
|
||
|
||
<h2>pre > code</h2>
|
||
<p>No language, should inherit .language-markup</p>
|
||
<pre><code><p>hi!</p></code></pre>
|
||
|
||
<h2>code.language-*</h2>
|
||
<p>No language, should inherit .language-markup</p>
|
||
<code class="language-*"><p>hi!</p></code>
|
||
|
||
<h2>code.language-none</h2>
|
||
<p>Should not be highlighted.</p>
|
||
<code class="language-none"><p>hi!</p></code>
|
||
</section>
|
||
|
||
<section class="language-markup">
|
||
<h1>Markup</h1>
|
||
|
||
<h2>Empty tag</h2>
|
||
<pre><code><p></p></code></pre>
|
||
|
||
<h2>Tag that spans multiple lines</h2>
|
||
<pre><code><p
|
||
>hello!
|
||
</p></code></pre>
|
||
|
||
<h2>Name-attribute pair</h2>
|
||
<pre><code><p></p></code></pre>
|
||
|
||
<h2>Name-attribute pair without quotes</h2>
|
||
<pre><code><p class=prism></p></code></pre>
|
||
|
||
<h2>Attribute without value</h2>
|
||
<pre><code><p data-foo></p></code></pre>
|
||
<pre><code><p data-foo ></p></code></pre>
|
||
|
||
<h2>Namespaces</h2>
|
||
<pre><code><html:p foo:bar="baz" foo:weee></html:p></code></pre>
|
||
|
||
<h2>XML prolog</h2>
|
||
<pre><code><?xml version="1.0" encoding="utf-8"?>
|
||
<svg></svg></code></pre>
|
||
|
||
<h2>DOCTYPE</h2>
|
||
<pre><code><!DOCTYPE html>
|
||
<html></html></code></pre>
|
||
|
||
<h2>CDATA section</h2>
|
||
<pre><code><ns1:description><![CDATA[
|
||
CDATA is <not> magical.
|
||
]]></ns1:description></code></pre>
|
||
|
||
<h2>Comment</h2>
|
||
<pre><code><!-- I'm a comment -->
|
||
And i'm not</code></pre>
|
||
|
||
<h2>Entities</h2>
|
||
<pre><code>&amp; &#x2665; &#160; &#x152;</code></pre>
|
||
|
||
<h2>Embedded JS and CSS</h2>
|
||
<pre><code><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>I can haz embedded CSS and JS</title>
|
||
<style>
|
||
@media print {
|
||
p { color: red !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>I can haz embedded CSS and JS</h1>
|
||
<script>
|
||
if (true) {
|
||
console.log('foo');
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html></code></pre>
|
||
</section>
|
||
|
||
<section class="language-css">
|
||
<h1>CSS</h1>
|
||
|
||
<h2>Empty rule</h2>
|
||
<pre><code>*{} * {} p {}</code></pre>
|
||
<pre><code>ul,
|
||
ol {}</code></pre>
|
||
|
||
<h2>Simple rule</h2>
|
||
<pre><code>p { color: red; }</code></pre>
|
||
|
||
<h2>Important rule</h2>
|
||
<pre><code>p { color: red !important; }</code></pre>
|
||
|
||
<h2>@ rule</h2>
|
||
<pre><code>@media screen and (min-width: 100px) {}</code></pre>
|
||
|
||
<h2>Comment</h2>
|
||
<pre><code>/* Simple comment here */</code></pre>
|
||
|
||
<h2>String</h2>
|
||
<pre><code>content: 'foo';</code></pre>
|
||
|
||
<h2>URL</h2>
|
||
<pre><code>content: url(foo.png);</code></pre>
|
||
</pre>
|
||
</section>
|
||
|
||
<section class="language-javascript">
|
||
<h1>JavaScript</h1>
|
||
|
||
<h2>Variable assignment</h2>
|
||
<pre><code>var foo = "bar", baz = 5;</code></pre>
|
||
|
||
<h2>Operators</h2>
|
||
<pre><code>(1 + 2 * 3)/4 >= 3 && 4 < 5 || 6 > 7</code></pre>
|
||
|
||
<h2>Indented code</h2>
|
||
<pre><code>if (true) {
|
||
while (true) {
|
||
doSomething();
|
||
}
|
||
}</code></pre>
|
||
|
||
<h2>Regex with slashes</h2>
|
||
<pre><code>var foo = /([^/])\/(\\?.|\[.+?])+?\/[gim]{0,3}/g;</code></pre>
|
||
|
||
<h2>Regex that ends with double slash</h2>
|
||
<pre><code>var bar = /\/\*[\w\W]*?\*\//g;</code></pre>
|
||
|
||
<h2>Single line comments & regexes</h2>
|
||
<pre><code>// http://lea.verou.me
|
||
var comment = /\/\*[\w\W]*?\*\//g;</code></pre>
|
||
|
||
<h2>Link in comment</h2>
|
||
<pre><code>// http://lea.verou.me
|
||
/* http://lea.verou.me */</code></pre>
|
||
|
||
<h2>Nested strings</h2>
|
||
<pre><code>var foo = "foo", bar = "He \"said\" 'hi'!"</code></pre>
|
||
|
||
<h2>Strings inside comments</h2>
|
||
<pre><code>// "foo"</code></pre>
|
||
<pre><code>/* "foo" */</code></pre>
|
||
|
||
<h2>Strings with slashes</h2>
|
||
<pre><code>env.content + '</' + env.tag + '>'</code></pre>
|
||
<pre><code>var foo = "/" + "/";</code></pre>
|
||
|
||
<h2>Regex inside single line comment</h2>
|
||
<pre><code>// hey, /this doesn’t fail!/ :D</code></pre>
|
||
</section>
|
||
|
||
<section id="failures" class="language-javascript">
|
||
<h1>Known failures (JavaScript)</h1>
|
||
<p>There are certain edge cases where Prism will fail.
|
||
There are always such cases in every regex-based syntax highlighter.
|
||
However, Prism dares to be open and honest about them.
|
||
If a failure is listed here, it doesn’t mean it will never be fixed. This is more of a “known bugs” list, just with a certain type of bug.
|
||
</p>
|
||
|
||
<h2>Comment-like substrings</h2>
|
||
<pre><code>"foo /* bar */ baz"; "foo // bar";</code></pre>
|
||
|
||
<h2>Strings inside regexes</h2>
|
||
<pre><code>/"foo"/;</code></pre>
|
||
|
||
<h2>Two or more division operators on the same line</h2>
|
||
<pre><code>5 / 6 / 7</code></pre>
|
||
</section>
|
||
|
||
<footer data-src="templates/footer.html" data-type="text/html"></footer>
|
||
|
||
<script src="prism.js"></script>
|
||
<script src="utopia.js"></script>
|
||
<script src="code.js"></script>
|
||
|
||
</body>
|
||
</html> |