HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script>
// Just a lil’ script to show off that inline JS gets highlighted
window.console && console.log('foo');
</script>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Prism</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<script src="prefixfree.min.js"></script>
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="https://www.google-analytics.com/ga.js" async></script>
</head>
<body>
<header>
<div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>
<ul id="features">
<li>
<strong>Dead simple</strong>
Include prism.css and prism.js, use proper HTML5 code tags (<code>code.language-xxxx</code>), done!
</li>
<li>
<strong>Intuitive</strong>
Language classes are inherited so you can only define the language once for multiple code snippets.
</li>
<li>
<strong>Light as a feather</strong>
The core is 2KB minified & gzipped. Languages add 0.3-0.5KB each, themes are around 1KB.
</li>
<li>
<strong>Blazing fast</strong>
Supports parallelism with Web Workers, if available.
</li>
<li>
<strong>Extensible</strong>
Define new languages or extend existing ones.
Add new features thanks to Prism’s plugin architecture.
</li>
<li>
<strong>Easy styling</strong>
All styling is done through CSS, with sensible class names like <code>.comment</code>, <code>.string</code>, <code>.property</code> etc
</li>
</ul>
</header>
<section id="used-by">
<h1>Used By</h1>
<p>Prism is used on several websites, small and large. Some of them are:</p>
<div class="used-by-logos">
<a href="http://smashingmagazine.com" target="_blank"><img src="img/logo-smashing.png" alt="Smashing Magazine" /></a>
<a class="uswds" href="https://playbook.cio.gov/designstandards/" target="_blank">U.S. Web Design Standards</a>
<a href="http://alistapart.com" target="_blank"><img src="img/logo-ala.png" alt="A List Apart" /></a>
<a href="https://developer.mozilla.org/" target="_blank"><img src="img/logo-mdn.png" alt="Mozilla Developer Network (MDN)" /></a>
<a href="http://css-tricks.com" target="_blank"><img src="img/logo-css-tricks.png" alt="CSS-Tricks" /></a>
<a href="http://www.sitepoint.com" target="_blank"><img src="img/logo-sitepoint.png" alt="SitePoint" /></a>
<a href="https://www.drupal.org" target="_blank"><img src="img/logo-drupal.png" alt="Drupal" /></a>
</div>
<p>It’s also used on <a href="https://brendaneich.com/2012/10/harmony-of-dreams-come-true/" target="_blank">the personal blog of Brendan Eich</a>, creator of JavaScript itself!</p>
</section>
<section id="examples">
<h1>Examples</h1>
<p>The Prism source, highlighted with Prism (don’t you just love how meta this is?):</p>
<pre data-src="prism.js"></pre>
<p>This page’s CSS code, highlighted with Prism:</p>
<pre data-src="style.css"></pre>
<p>This page’s HTML, highlighted with Prism:</p>
<pre data-src="index.html"></pre>
<p>This page’s logo (SVG), highlighted with Prism:</p>
<pre data-src="logo.svg"></pre>
<p>If you’re still not sold, you can <a href="examples.html">view more examples</a> or <a href="test.html">try it out for yourself</a>.</p>
</section>
<section id="features-full" class="language-markup">
<h1>Full list of features</h1>
<ul>
<li><strong>Only 2KB</strong> minified & gzipped (core). Each language definition adds roughly 300-500 bytes.</li>
<li>Encourages good author practices. Other highlighters encourage or even force you to use elements that are semantically wrong,
like <code><pre></code> (on its own) or <code><script></code>.
Prism forces you to use the correct element for marking up code: <code><code></code>.
On its own for inline code, or inside a <pre> for blocks of code.
In addition, the language is defined through the way recommended in the HTML5 draft: through a language-xxxx class.</li>
<li>The language definition is inherited. This means that if multiple code snippets have the same language, you can just define it once, in one of their common ancestors.</li>
<li>Supports <strong>parallelism with Web Workers</strong>, if available. Disabled by default (<a href="faq.html#why-is-asynchronous-highlighting-disabled-by-default">why?</a>).</li>
<li>Very easy to extend without modifying the code, due to Prism’s <a href="#plugins">plugin architecture</a>. Multiple hooks are scattered throughout the source.</li>
<li>Very easy to <a href="extending.html#language-definitions">define new languages</a>. Only thing you need is a good understanding of regular expressions</li>
<li>All styling is done through CSS, with <a href="faq.html#how-do-i-know-which-tokens-i-can-style-for">sensible class names</a> rather than ugly namespaced abbreviated nonsense.</li>
<li>Wide browser support: IE9+, Firefox, Chrome, Safari, <a href="faq.html#this-page-doesnt-work-in-opera">Opera</a>, most Mobile browsers</li>
<li>Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)</li>
<li>Highlights inline code as well, not just code blocks</li>
<li>Highlights nested languages (CSS in HTML, JavaScript in HTML)</li>
<li>It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.</li>
<li>Highlight specific lines and/or line ranges (requires <a href="plugins/line-highlight/">plugin</a>)</li>
<li>Show invisible characters like tabs, line breaks etc (requires <a href="plugins/show-invisibles/">plugin</a>)</li>
<li>Autolink URLs and emails, use Markdown links in comments (requires <a href="plugins/autolinker/">plugin</a>)</li>
</ul>
</section>
<section id="limitations">
<h1>Limitations</h1>
<ul>
<li>Any pre-existing HTML in the code will be stripped off. <a href="faq.html#if-pre-existing-html-is-stripped-off-how-can-i-highlight">There are ways around it though</a>.</li>
<li>Regex-based so it *will* fail on <a href="examples.html#failures">certain edge cases</a>.</li>
<li>No IE 6-8 support. If someone can read code, they are probably in the 85% of the population with a modern browser.</li>
</ul>
</section>
<section id="basic-usage" class="language-markup">
<h1>Basic usage</h1>
<p>You will need to include the <code>prism.css</code> and <code>prism.js</code> files you downloaded in your page. Example:
<pre><code><!DOCTYPE html>
<html>
<head>
...</code>
<code class="highlight"><link href="themes/prism.css" rel="stylesheet" /></code>
<code></head>
<body>
...</code>
<code class="highlight"><script src="prism.js"></script></code>
<code></body>
</html></code></pre>
<p>Prism does its best to encourage good authoring practices. Therefore, it only works with <code><code></code> elements, since marking up code without a <code><code></code> element is semantically invalid.
<a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-code-element">According to the HTML5 spec</a>, the recommended way to define a code language is a <code>language-xxxx</code> class, which is what Prism uses.
To make things easier however, Prism assumes that this language definition is inherited. Therefore, if multiple <code><code></code> elements have the same language, you can add the <code>language-xxxx</code> class on one of their common ancestors.
This way, you can also define a document-wide default language, by adding a <code>language-xxxx</code> class on the <code><body></code> or <code><html></code> element.
<p>If you want to opt-out of highlighting for a <code><code></code> element that is a descendant of an element with a declared code language, you can add the class <code>language-none</code> to it (or any non-existing language, really).</p>
<p>The <a href="https://www.w3.org/TR/html5/grouping-content.html#the-pre-element">recommended way to mark up a code block</a>
(both for semantics and for Prism) is a <code><pre></code> element with a <code><code></code> element inside, like so:</p>
<pre><code><pre><code class="language-css">p { color: red }</code></pre></code></pre>
<p>If you use that pattern, the <code><pre></code> will automatically get the <code>language-xxxx</code> class (if it doesn’t already have it) and will be styled as a code block.</p>
<p>If you want to prevent any elements from being automatically highlighted, you can use the attribute <code>data-manual</code> on the <code><script></code> element you used for prism and use the <a href="extending.html#api">API</a>.
Example:</p>
<pre><code><script src="prism.js" data-manual></script></code></pre>
<p>If you want to use Prism on the server or through the command line, Prism can be used with Node.js as well.
This might be useful if you're trying to generate static HTML pages with highlighted code for environments that don't support browser-side JS, like <a href="https://www.ampproject.org/">AMP pages</a>.</p>
<p>You can install Prism for Node.js by running:</p>
<pre><code>$ npm install prismjs</code></pre>
<p>Example:</p>
<pre><code class="language-js">var Prism = require('prismjs');
// The code snippet you want to highlight, as a string
var code = "var data = 1;";
// Returns a highlighted HTML string
var html = Prism.highlight(code, Prism.languages.javascript);</code></pre>
</section>
<section id="languages-list" class="language-markup">
<h1>Supported languages</h1>
<p>This is the list of all <span id="languages-list-count"></span> languages currently supported by Prism, with their corresponding alias, to use in place of <code>xxxx</code> in the <code>language-xxxx</code> class:</p>
</section>
<section id="plugins">
<h1>Plugins</h1>
<p>Plugins are additional scripts (and CSS code) that extend Prism’s functionality. Many of the following plugins are official, but are released as plugins to keep the Prism Core small for those who don’t need the extra functionality.</p>
<ul class="plugin-list"></ul>
<p>No assembly required to use them. Just select them in the <a href="download.html">download</a> page.</p>
<p>It’s very easy to <a href="extending.html#writing-plugins">write your own Prism plugins</a>. Did you write a plugin for Prism that you want added to this list? <a href="https://github.com/LeaVerou/prism" target="_blank">Send a pull request</a>!</p>
</section>
<section id="languages">
<h1>Third-party language definitions</h1>
<ul>
<li><a href="https://github.com/SassDoc/prism-scss-sassdoc">SassDoc Sass/Scss comments</a></li>
</ul>
</section>
<section id="tutorials">
<h1>Third-party tutorials</h1>
<p>Several tutorials have been written by members of the community to help you integrate Prism into multiple different website types and configurations:</p>
<ul>
<li><a href="https://websitebeaver.com/escape-html-inside-code-or-pre-tag-to-entities-to-display-raw-code-with-prismjs">Escape HTML Inside <code> or <pre> Tag to Entities to Display Raw Code with PrismJS</a></li>
<li><a href="http://crambler.com/how-to-implement-prism-js-syntax-highlighting-into-your-wordpress-site/">How To Implement Prism.js Syntax Highlighting Into Your WordPress Site</a></li>
<li><a href="http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js/">Adding a Syntax Highlighter Shortcode Using Prism.js | WPTuts+</a></li>
<li><a href="http://www.stramaxon.com/2012/07/prism-syntax-highlighter-for-blogger.html">Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot</a></li>
<li><a href="http://www.allblogtools.com/tricks-and-hacks/beautify-source-codes-in-your-posts-with-prism-syntax-highlighter-for-blogger/">Beautify Source Codes In Your Posts With Prism Syntax Highlighter For Blogger</a></li>
<li><a href="http://dotnordic.se/extending-and-customizing-prism-syntax-highlighter/">Extending and customizing Prism syntax highlighter</a></li>
<li><a href="http://schier.co/blog/2013/01/07/how-to-re-run-prismjs-on-ajax-content.html">How To Re-Run Prism.js On AJAX Content</a></li>
<li><a href="http://www.semisedlak.com/article/highlight-your-code-syntax-with-prismjs/">Highlight your code syntax with Prism.js</a></li>
<li><a href="http://gmurphey.com/2012/08/09/jekyll-plugin-syntax-highlighting-with-prism.html">Jekyll Plugin: Syntax Highlighting With Prism</a></li>
<li><a href="http://byverdu.es/2013/06/tutorial-sobre-prism-js-inserta-ejemplos-de-codigo-en-web-wordpress-y-blogger/">[Spanish] Tutorial sobre Prism.js Como utilizarlo en Web, Wordpress y Blogger</a></li>
<li><a href="https://usetypo3.com/fs-code-snippet.html">A code snippet content element powered by Prism.js for TYPO3 CMS</a></li>
</ul>
<p>Please note that the tutorials listed here are not verified to contain correct information. Read at your risk and always check the official documentation here if something doesn’t work :)</p>
<p>Have you written a tutorial about Prism that’s not already included here? Send a pull request!</p>
</section>
<section id="credits">
<h1>Credits</h1>
<ul>
<li>Special thanks to <a href="https://github.com/Golmote">Golmote</a> and <a href="https://github.com/apfelbox">Jannik Zschiesche</a> for their contributions and for being <strong>amazing maintainers</strong>. Prism would not have been able to keep up without their help.</li>
<li>To <a href="https://twitter.com/kizmarh">Roman Komarov</a> for his contributions, feedback and testing.</li>
<li>To <a href="https://twitter.com/zdfs">Zachary Forrest</a> for <a href="https://twitter.com/zdfs/statuses/217834980871639041">coming up with the name “Prism”</a></li>
<li>To <a href="http://stellarr.deviantart.com/">stellarr</a> for the <a href="http://stellarr.deviantart.com/art/Spectra-Wallpaper-Pack-97785901?q=gallery%3Astellarr%2F185512&qo=2">spectrum background</a> used on this page</li>
<li>To <a href="https://twitter.com/thecodezombie">Jason Hobbs</a> for <a href="https://twitter.com/thecodezombie/status/217663703825399809">encouraging me</a> to release this script as standalone</li>
</ul>
</section>
<footer data-src="templates/footer.html" data-type="text/html"></footer>
<script src="prism.js"></script>
<script src="utopia.js"></script>
<script src="components.js"></script>
<script src="code.js"></script>
<script>
(function() {
var languageItems = [];
var languages = components.languages;
var count = 0;
for (var id in languages) {
if (id == 'meta') {
continue;
}
count++;
var name = languages[id].title || languages[id];
languageItems.push({
tag: 'li',
attributes: {
'data-id': id
},
contents: [
name,
' - ',
{
tag: 'code',
contents: id
}
]
});
}
$u.element.create('ul', {
contents: languageItems,
inside: '#languages-list'
});
$u.element.contents($('#languages-list-count'), count);
}());
</script>
</body>
</html>
CSS
@import url(http://fonts.googleapis.com/css?family=Questrial);
@import url(http://fonts.googleapis.com/css?family=Arvo);
@font-face {
src: url(http://lea.verou.me/logo.otf);
font-family: 'LeaVerou';
}
/*
Shared styles
*/
section h1,
#features li strong,
header h2,
footer p {
font: 100% Rockwell, Arvo, serif;
}
/*
Styles
*/
* {
margin: 0;
padding: 0;
font-weight: normal;
}
body {
font: 100%/1.5 Questrial, sans-serif;
tab-size: 4;
hyphens: auto;
}
a {
color: inherit;
}
section h1 {
font-size: 250%;
}
section section h1 {
font-size: 150%;
}
section h1 code {
font-style: normal;
}
section h1 > a {
text-decoration: none;
}
section h1 > a:before {
content: '§';
position: absolute;
padding: 0 .2em;
margin-left: -1em;
border-radius: .2em;
color: silver;
text-shadow: 0 1px white;
}
section h1 > a:hover:before {
color: black;
background: #f1ad26;
}
p {
margin: 1em 0;
}
section h1,
h2 {
margin: 1em 0 .3em;
}
dt {
margin: 1em 0 0 0;
font-size: 130%;
}
dt:after {
content: ':';
}
dd {
margin-left: 2em;
}
strong {
font-weight: bold;
}
code, pre {
font-family: Consolas, Monaco, 'Andale Mono', 'Lucida Console', monospace;
hyphens: none;
}
pre {
max-height: 30em;
overflow: auto;
}
pre > code.highlight {
outline: .4em solid red;
outline-offset: .4em;
}
header,
body > section {
display: block;
max-width: 900px;
margin: auto;
}
header, footer {
position: relative;
padding: 30px -webkit-calc(50% - 450px); /* Workaround for bug */
padding: 30px calc(50% - 450px);
color: white;
text-shadow: 0 -1px 2px black;
background: url(img/spectrum.png) fixed;
}
header:before,
footer:before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 20px;
background-size: 20px 40px;
background-repeat: repeat-x;
background-image: linear-gradient(45deg, transparent 34%, white 34%, white 66%, transparent 66%),
linear-gradient(135deg, transparent 34%, white 34%, white 66%, transparent 66%);
}
header {
}
header .intro,
html.simple header {
overflow: hidden;
}
header h1 {
float: left;
margin-right: 30px;
color: #7fab14;
text-align: center;
font-size: 140%;
text-transform: uppercase;
letter-spacing: .25em;
}
header h2 {
margin-top: .5em;
color: #f1ad26;
}
header h1 a {
text-decoration: none;
}
header img {
display: block;
width: 150px;
height: 128px;
margin-bottom: .3em;
border: 0;
}
header h2 {
font-size: 300%;
}
header .intro p {
margin: 0;
font: 150%/1.4 Questrial, sans-serif;
font-size: 150%;
}
#features {
width: 66em;
margin-top: 2em;
font-size: 80%;
}
#features li {
margin: 0 0 2em 0;
list-style: none;
display: inline-block;
width: 27em;
vertical-align: top;
}
#features li:nth-child(odd) {
margin-right: 5em;
}
#features li:before {
content: '✓';
float: left;
margin-left: -.8em;
color: #7fab14;
font-size: 400%;
line-height: 1;
}
#features li strong {
display: block;
margin-bottom: .1em;
font-size: 200%;
}
header .download-button {
float: right;
margin: 0 0 .5em .5em;
}
#theme {
position: relative;
z-index: 1;
float: right;
margin-right: -1em;
text-align: center;
text-transform: uppercase;
letter-spacing: .2em;
}
#theme > p {
position: absolute;
left: 100%;
transform: translateX(50%) rotate(90deg) ;
transform-origin: top left;
font-size: 130%;
}
#theme > label {
position: relative;
display: block;
width: 7em;
line-height: 1em;
padding: 3em 0;
border-radius: 50%;
background: hsla(0,0%,100%,.5);
cursor: pointer;
font-size: 110%;
}
#theme > label:before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
border-radius: inherit;
background: url(img/spectrum.png) fixed;
}
#theme > label:nth-of-type(n+2) {
margin-top: -2.5em;
}
#theme > input:not(:checked) + label:hover {
background: hsla(77, 80%, 60%, .5);
}
#theme > input {
position: absolute;
clip: rect(0,0,0,0);
}
#theme > input:checked + label {
background: #7fab14;
}
footer {
margin-top: 2em;
background-position: bottom;
color: white;
text-shadow: 0 -1px 2px black;
}
footer:before {
bottom: auto;
top: 0;
background-position: bottom;
}
footer p {
font-size: 150%;
}
footer ul {
column-count: 3;
}
.download-button {
display: block;
padding: .2em .8em .1em;
border: 1px solid rgba(0,0,0,0.5);
border-radius: 10px;
background: #39a1cf;
box-shadow: 0 2px 10px black,
inset 0 1px hsla(0,0%,100%,.3),
inset 0 .4em hsla(0,0%,100%,.2),
inset 0 10px 20px hsla(0,0%,100%,.25),
inset 0 -15px 30px rgba(0,0,0,0.3);
color: white;
text-shadow: 0 -1px 2px black;
text-align: center;
font-size: 250%;
line-height: 1.5;
text-transform: uppercase;
text-decoration: none;
hyphens: manual;
}
.download-button:hover {
background-color: #7fab14;
}
.download-button:active {
box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
}
#toc {
position: fixed;
left: 1%;
max-width: calc(48% - 450px);
font-size: 80%;
opacity: .3;
}
@media (max-width: 1200px) {
#toc {
display: none;
}
}
#toc:hover {
opacity: 1;
}
#toc h1 {
font-size: 180%;
}
#toc li {
list-style: none;
}
#logo:before {
content: '☠';
float: right;
font: 100px/1.6 LeaVerou;
}
.used-by-logos {
overflow: hidden;
}
.used-by-logos > a {
float: left;
width: 33.33%;
height: 100px;
text-align: center;
background: #F5F2F0;
box-sizing: border-box;
border: 5px solid white;
position: relative;
}
.used-by-logos > .uswds {
background: url('img/screen-us-web-design-standards.png') no-repeat 0 0;
background-size: cover;
text-indent: -999em;
}
.used-by-logos > a > img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
label a.owner {
margin: 0 .5em;
}
label a.owner:not(:hover) {
text-decoration: none;
color: #aaa;
}
#languages-list ul {
column-count: 3;
}
#languages-list li {
padding: .2em;
}
#languages-list li[data-id="javascript"] {
border-bottom: 1px solid #aaa;
padding-bottom: 1em;
margin-bottom: 1em;
margin-right: 1em;
}
JavaScript
/* **********************************************
Begin prism-core.js
********************************************** */
var _self = (typeof window !== 'undefined')
? window // if in browser
: (
(typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
? self // if in worker
: {} // if in node js
);
/**
* Prism: Lightweight, robust, elegant syntax highlighting
* MIT license http://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou http://lea.verou.me
*/
var Prism = (function(){
// Private helper vars
var lang = /\blang(?:uage)?-(\w+)\b/i;
var uniqueId = 0;
var _ = _self.Prism = {
manual: _self.Prism && _self.Prism.manual,
disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
util: {
encode: function (tokens) {
if (tokens instanceof Token) {
return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);
} else if (_.util.type(tokens) === 'Array') {
return tokens.map(_.util.encode);
} else {
return tokens.replace(/&/g, '&').replace(/ text.length) {
// Something went terribly wrong, ABORT, ABORT!
return;
}
if (str instanceof Token) {
continue;
}
pattern.lastIndex = 0;
var match = pattern.exec(str),
delNum = 1;
// Greedy patterns can override/remove up to two previously matched tokens
if (!match && greedy && i != strarr.length - 1) {
pattern.lastIndex = pos;
match = pattern.exec(text);
if (!match) {
break;
}
var from = match.index + (lookbehind ? match[1].length : 0),
to = match.index + match[0].length,
k = i,
p = pos;
for (var len = strarr.length; k < len && (p < to || (!strarr[k].type && !strarr[k - 1].greedy)); ++k) {
p += strarr[k].length;
// Move the index i to the element in strarr that is closest to from
if (from >= p) {
++i;
pos = p;
}
}
/*
* If strarr[i] is a Token, then the match starts inside another Token, which is invalid
* If strarr[k - 1] is greedy we are in conflict with another greedy pattern
*/
if (strarr[i] instanceof Token || strarr[k - 1].greedy) {
continue;
}
// Number of tokens to delete and replace with the new match
delNum = k - i;
str = text.slice(pos, p);
match.index -= pos;
}
if (!match) {
if (oneshot) {
break;
}
continue;
}
if(lookbehind) {
lookbehindLength = match[1].length;
}
var from = match.index + lookbehindLength,
match = match[0].slice(lookbehindLength),
to = from + match.length,
before = str.slice(0, from),
after = str.slice(to);
var args = [i, delNum];
if (before) {
++i;
pos += before.length;
args.push(before);
}
var wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias, match, greedy);
args.push(wrapped);
if (after) {
args.push(after);
}
Array.prototype.splice.apply(strarr, args);
if (delNum != 1)
_.matchGrammar(text, strarr, grammar, i, pos, true, token);
if (oneshot)
break;
}
}
}
},
tokenize: function(text, grammar, language) {
var strarr = [text];
var rest = grammar.rest;
if (rest) {
for (var token in rest) {
grammar[token] = rest[token];
}
delete grammar.rest;
}
_.matchGrammar(text, strarr, grammar, 0, 0, false);
return strarr;
},
hooks: {
all: {},
add: function (name, callback) {
var hooks = _.hooks.all;
hooks[name] = hooks[name] || [];
hooks[name].push(callback);
},
run: function (name, env) {
var callbacks = _.hooks.all[name];
if (!callbacks || !callbacks.length) {
return;
}
for (var i=0, callback; callback = callbacks[i++];) {
callback(env);
}
}
}
};
var Token = _.Token = function(type, content, alias, matchedStr, greedy) {
this.type = type;
this.content = content;
this.alias = alias;
// Copy of the full string this token was created from
this.length = (matchedStr || "").length|0;
this.greedy = !!greedy;
};
Token.stringify = function(o, language, parent) {
if (typeof o == 'string') {
return o;
}
if (_.util.type(o) === 'Array') {
return o.map(function(element) {
return Token.stringify(element, language, o);
}).join('');
}
var env = {
type: o.type,
content: Token.stringify(o.content, language, parent),
tag: 'span',
classes: ['token', o.type],
attributes: {},
language: language,
parent: parent
};
if (o.alias) {
var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias];
Array.prototype.push.apply(env.classes, aliases);
}
_.hooks.run('wrap', env);
var attributes = Object.keys(env.attributes).map(function(name) {
return name + '="' + (env.attributes[name] || '').replace(/"/g, '"') + '"';
}).join(' ');
return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + (attributes ? ' ' + attributes : '') + '>' + env.content + '';
};
if (!_self.document) {
if (!_self.addEventListener) {
// in Node.js
return _self.Prism;
}
if (!_.disableWorkerMessageHandler) {
// In worker
_self.addEventListener('message', function (evt) {
var message = JSON.parse(evt.data),
lang = message.language,
code = message.code,
immediateClose = message.immediateClose;
_self.postMessage(_.highlight(code, _.languages[lang], lang));
if (immediateClose) {
_self.close();
}
}, false);
}
return _self.Prism;
}
//Get current script and highlight
var script = document.currentScript || [].slice.call(document.getElementsByTagName("script")).pop();
if (script) {
_.filename = script.src;
if (!_.manual && !script.hasAttribute('data-manual')) {
if(document.readyState !== "loading") {
if (window.requestAnimationFrame) {
window.requestAnimationFrame(_.highlightAll);
} else {
window.setTimeout(_.highlightAll, 16);
}
}
else {
document.addEventListener('DOMContentLoaded', _.highlightAll);
}
}
}
return _self.Prism;
})();
if (typeof module !== 'undefined' && module.exports) {
module.exports = Prism;
}
// hack for components to work correctly in node.js
if (typeof global !== 'undefined') {
global.Prism = Prism;
}
/* **********************************************
Begin prism-markup.js
********************************************** */
Prism.languages.markup = {
'comment': //,
'prolog': /<\?[\s\S]+?\?>/,
'doctype': //i,
'cdata': //i,
'tag': {
pattern: /<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,
inside: {
'tag': {
pattern: /^<\/?[^\s>\/]+/i,
inside: {
'punctuation': /^<\/?/,
'namespace': /^[^\s>\/:]+:/
}
},
'attr-value': {
pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,
inside: {
'punctuation': [
/^=/,
{
pattern: /(^|[^\\])["']/,
lookbehind: true
}
]
}
},
'punctuation': /\/?>/,
'attr-name': {
pattern: /[^\s>\/]+/,
inside: {
'namespace': /^[^\s>\/:]+:/
}
}
}
},
'entity': /&#?[\da-z]{1,8};/i
};
Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] =
Prism.languages.markup['entity'];
// Plugin to make entity title show the real entity, idea by Roman Komarov
Prism.hooks.add('wrap', function(env) {
if (env.type === 'entity') {
env.attributes['title'] = env.content.replace(/&/, '&');
}
});
Prism.languages.xml = Prism.languages.markup;
Prism.languages.html = Prism.languages.markup;
Prism.languages.mathml = Prism.languages.markup;
Prism.languages.svg = Prism.languages.markup;
/* **********************************************
Begin prism-css.js
********************************************** */
Prism.languages.css = {
'comment': /\/\*[\s\S]*?\*\//,
'atrule': {
pattern: /@[\w-]+?.*?(?:;|(?=\s*\{))/i,
inside: {
'rule': /@[\w-]+/
// See rest below
}
},
'url': /url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
'selector': /[^{}\s][^{};]*?(?=\s*\{)/,
'string': {
pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
greedy: true
},
'property': /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
'important': /\B!important\b/i,
'function': /[-a-z0-9]+(?=\()/i,
'punctuation': /[(){};:]/
};
Prism.languages.css['atrule'].inside.rest = Prism.util.clone(Prism.languages.css);
if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
'style': {
pattern: /()[\s\S]*?(?=<\/style>)/i,
lookbehind: true,
inside: Prism.languages.css,
alias: 'language-css',
greedy: true
}
});
Prism.languages.insertBefore('inside', 'attr-value', {
'style-attr': {
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
inside: {
'attr-name': {
pattern: /^\s*style/i,
inside: Prism.languages.markup.tag.inside
},
'punctuation': /^\s*=\s*['"]|['"]\s*$/,
'attr-value': {
pattern: /.+/i,
inside: Prism.languages.css
}
},
alias: 'language-css'
}
}, Prism.languages.markup.tag);
}
/* **********************************************
Begin prism-clike.js
********************************************** */
Prism.languages.clike = {
'comment': [
{
pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
lookbehind: true
},
{
pattern: /(^|[^\\:])\/\/.*/,
lookbehind: true
}
],
'string': {
pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
greedy: true
},
'class-name': {
pattern: /((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,
lookbehind: true,
inside: {
punctuation: /[.\\]/
}
},
'keyword': /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
'boolean': /\b(?:true|false)\b/,
'function': /[a-z0-9_]+(?=\()/i,
'number': /\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,
'operator': /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,
'punctuation': /[{}[\];(),.:]/
};
/* **********************************************
Begin prism-javascript.js
********************************************** */
Prism.languages.javascript = Prism.languages.extend('clike', {
'keyword': /\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,
'number': /\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,
// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
'function': /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,
'operator': /-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/
});
Prism.languages.insertBefore('javascript', 'keyword', {
'regex': {
pattern: /(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,
lookbehind: true,
greedy: true
},
// This must be declared before keyword because we use "function" inside the look-forward
'function-variable': {
pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,
alias: 'function'
}
});
Prism.languages.insertBefore('javascript', 'string', {
'template-string': {
pattern: /`(?:\\[\s\S]|[^\\`])*`/,
greedy: true,
inside: {
'interpolation': {
pattern: /\$\{[^}]+\}/,
inside: {
'interpolation-punctuation': {
pattern: /^\$\{|\}$/,
alias: 'punctuation'
},
rest: Prism.languages.javascript
}
},
'string': /[\s\S]+/
}
}
});
if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
'script': {
pattern: /()[\s\S]*?(?=<\/script>)/i,
lookbehind: true,
inside: Prism.languages.javascript,
alias: 'language-javascript',
greedy: true
}
});
}
Prism.languages.js = Prism.languages.javascript;
/* **********************************************
Begin prism-file-highlight.js
********************************************** */
(function () {
if (typeof self === 'undefined' || !self.Prism || !self.document || !document.querySelector) {
return;
}
self.Prism.fileHighlight = function() {
var Extensions = {
'js': 'javascript',
'py': 'python',
'rb': 'ruby',
'ps1': 'powershell',
'psm1': 'powershell',
'sh': 'bash',
'bat': 'batch',
'h': 'c',
'tex': 'latex'
};
Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function (pre) {
var src = pre.getAttribute('data-src');
var language, parent = pre;
var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;
while (parent && !lang.test(parent.className)) {
parent = parent.parentNode;
}
if (parent) {
language = (pre.className.match(lang) || [, ''])[1];
}
if (!language) {
var extension = (src.match(/\.(\w+)$/) || [, ''])[1];
language = Extensions[extension] || extension;
}
var code = document.createElement('code');
code.className = 'language-' + language;
pre.textContent = '';
code.textContent = 'Loading…';
pre.appendChild(code);
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status < 400 && xhr.responseText) {
code.textContent = xhr.responseText;
Prism.highlightElement(code);
}
else if (xhr.status >= 400) {
code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
}
else {
code.textContent = '✖ Error: File does not exist or is empty';
}
}
};
xhr.send(null);
});
};
document.addEventListener('DOMContentLoaded', self.Prism.fileHighlight);
})();