Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

228 lines (172 sloc) 6.275 kB
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Examples ▲ Prism</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="prism.css" data-noprefix />
<script src="prefixfree.min.js"></script>
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="" async></script>
<div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>
<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>
<section class="language-markup">
<h1>Different markup</h1>
<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 > code.language-css</h2>
<pre><code class="language-css">p { color: red; }</code></pre>
<h2>pre.language-css > code.language-*</h2>
<pre class="language-css"><code class="language-*">p { color: red; }</code></pre>
<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>
<p>No language, should inherit .language-markup</p>
<code class="language-*">&lt;p>hi!&lt;/p></code>
<p>Should not be highlighted.</p>
<code class="language-none">&lt;p>hi!&lt;/p></code>
<section class="language-markup">
<h2>Empty tag</h2>
<h2>Tag that spans multiple lines</h2>
<h2>Name-attribute pair</h2>
<h2>Name-attribute pair without quotes</h2>
<pre><code>&lt;p class=prism>&lt;/p></code></pre>
<h2>Attribute without value</h2>
<pre><code>&lt;p data-foo>&lt;/p></code></pre>
<pre><code>&lt;p data-foo >&lt;/p></code></pre>
<pre><code>&lt;html:p foo:bar="baz" foo:weee>&lt;/html:p></code></pre>
<h2>XML prolog</h2>
<pre><code>&lt;?xml version="1.0" encoding="utf-8"?>
<pre><code>&lt;!DOCTYPE html>
<h2>CDATA section</h2>
CDATA is &lt;not> magical.
<pre><code>&lt;!-- I'm a comment -->
And i'm not</code></pre>
<pre><code>&amp;amp; &amp;#x2665; &amp;#160; &amp;#x152;</code></pre>
<h2>Embedded JS and CSS</h2>
<pre><code>&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;meta charset="utf-8" />
&lt;title>I can haz embedded CSS and JS&lt;/title>
@media print {
p { color: red !important; }
&lt;h1>I can haz embedded CSS and JS&lt;/h1>
if (true) {
<section class="language-css">
<h2>Empty rule</h2>
<pre><code>*{} * {} p {}</code></pre>
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>
<pre><code>/* Simple comment here */</code></pre>
<pre><code>content: 'foo';</code></pre>
<pre><code>content: url(foo.png);</code></pre>
<section class="language-javascript">
<h2>Variable assignment</h2>
<pre><code>var foo = "bar", baz = 5;</code></pre>
<pre><code>(1 + 2 * 3)/4 >= 3 &amp;&amp; 4 &lt; 5 || 6 > 7</code></pre>
<h2>Indented code</h2>
<pre><code>if (true) {
while (true) {
<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 &amp; regexes</h2>
var comment = /\/\*[\w\W]*?\*\//g;</code></pre>
<h2>Link in comment</h2>
/* */</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 + '&lt;/' + 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>
<h2>Two or more division operators on the same line</h2>
<pre><code>var foo = 5 / 6 / 7;</code></pre>
<h2>A division operator on the same line as a regex</h2>
<pre><code>var foo = 1/2, bar = /a/g;</code></pre>
<pre><code>var foo = /a/, bar = 3/4;</code></pre>
<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.
<h2>Comment-like substrings</h2>
<pre><code>"foo /* bar */ baz"; "foo // bar";</code></pre>
<h2>Two quotes of the same type (i.e. both single or both double) inside a regex</h2>
<pre><code>var foo = /"foo"/;</code></pre>
<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>
Jump to Line
Something went wrong with that request. Please try again.