Hash :
6763cd53
Author :
Date :
2012-07-26T18:48:34
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161
<!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>
<h1>Markup</h1>
<h2>Empty tag</h2>
<pre class="prism"><code class="language-markup"><p></p></code></pre>
<h2>Tag that spans multiple lines</h2>
<pre class="prism"><code class="language-markup"><p
>hello!
</p></code></pre>
<h2>Name-attribute pair</h2>
<pre class="prism"><code class="language-markup"><p class="prism"></p></code></pre>
<h2>Name-attribute pair without quotes</h2>
<pre class="prism"><code class="language-markup"><p class=prism></p></code></pre>
<h2>Attribute without value</h2>
<pre class="prism"><code class="language-markup"><p data-foo></p></code></pre>
<pre class="prism"><code class="language-markup"><p data-foo ></p></code></pre>
<h2>Namespaces</h2>
<pre class="prism"><code class="language-markup"><html:p foo:bar="baz" foo:weee></html:p></code></pre>
<h2>XML prolog</h2>
<pre class="prism"><code class="language-markup"><?xml version="1.0" encoding="utf-8"?>
<svg></svg></code></pre>
<h2>DOCTYPE</h2>
<pre class="prism"><code class="language-markup"><!DOCTYPE html>
<html></html></code></pre>
<h2>CDATA section</h2>
<pre class="prism"><code class="language-markup"><ns1:description><![CDATA[
CDATA is <not> magical.
]]></ns1:description></code></pre>
<h2>Comment</h2>
<pre class="prism"><code class="language-markup"><!-- I'm a comment -->
And i'm not</code></pre>
<h2>Entities</h2>
<pre class="prism"><code class="language-markup">&amp; &#x2665; &#160; &#x152;</code></pre>
</pre>
</section>
<section>
<h1>CSS</h1>
<h2>Empty rule</h2>
<pre class="prism"><code class="language-css">*{}</code></pre>
<pre class="prism"><code class="language-css">* {}</code></pre>
<pre class="prism"><code class="language-css">p {}</code></pre>
<pre class="prism"><code class="language-css">ul,
ol {}</code></pre>
<h2>Simple rule</h2>
<pre class="prism"><code class="language-css">p { color: red; }</code></pre>
<h2>Important rule</h2>
<pre class="prism"><code class="language-css">p { color: red !important; }</code></pre>
<h2>@ rule</h2>
<pre class="prism"><code class="language-css">@media screen and (min-width: 100px) {}</code></pre>
<h2>Comment</h2>
<pre class="prism"><code class="language-css">/* Simple comment here */</code></pre>
</pre>
</section>
<section>
<h1>JavaScript</h1>
<h2>Variable assignment</h2>
<pre class="prism"><code class="language-javascript">var foo = "bar", baz = 5;</code></pre>
<h2>Operators</h2>
<pre class="prism"><code class="language-javascript">(1 + 2 * 3)/4 >= 3 && 4 < 5 || 6 > 7</code></pre>
<h2>Indented code</h2>
<pre class="prism"><code class="language-javascript">if (true) {
while (true) {
doSomething();
}
}</code></pre>
<h2>Regexes</h2>
<pre class="prism"><code class="language-javascript">/([^/])\/(\\?.|\[.+?])+?\/[gim]{0,3}/g</code></pre>
<pre class="prism"><code class="language-javascript">/\/\*[\w\W]*?\*\//g</code></pre>
<h2>Single line comments & regexes</h2>
<pre class="prism"><code class="language-javascript">// http://lea.verou.me
var comment = /\/\*[\w\W]*?\*\//g;</code></pre>
<h2>Link in comment</h2>
<pre class="prism"><code class="language-javascript">// http://lea.verou.me
/* http://lea.verou.me */</code></pre>
<h2>Strings with slashes</h2>
<pre class="prism"><code class="language-javascript">env.content + '</' + env.tag + '>'</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>