The Prism source, highlighted with Prism (don’t you just love how meta this is?):
var _self = (typeof window !== 'undefined')
? window
: (
(typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
? self
: {}
);
var Prism = (function (_self) {
var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
var uniqueId = 0;
var plainTextGrammar = {};
var _ = {
manual: _self.Prism && _self.Prism.manual,
disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
util: {
encode: function encode(tokens) {
if (tokens instanceof Token) {
return new Token(tokens.type, encode(tokens.content), tokens.alias);
} else if (Array.isArray(tokens)) {
return tokens.map(encode);
} else {
return tokens.replace(/&/g, '&').replace(/</g, '<').replace(/\u00a0/g, ' ');
}
},
type: function (o) {
return Object.prototype.toString.call(o).slice(8, -1);
},
objId: function (obj) {
if (!obj['__id']) {
Object.defineProperty(obj, '__id', { value: ++uniqueId });
}
return obj['__id'];
},
clone: function deepClone(o, visited) {
visited = visited || {};
var clone; var id;
switch (_.util.type(o)) {
case 'Object':
id = _.util.objId(o);
if (visited[id]) {
return visited[id];
}
clone = ({});
visited[id] = clone;
for (var key in o) {
if (o.hasOwnProperty(key)) {
clone[key] = deepClone(o[key], visited);
}
}
return (clone);
case 'Array':
id = _.util.objId(o);
if (visited[id]) {
return visited[id];
}
clone = [];
visited[id] = clone;
(((o))).forEach(function (v, i) {
clone[i] = deepClone(v, visited);
});
return (clone);
default:
return o;
}
},
getLanguage: function (element) {
while (element) {
var m = lang.exec(element.className);
if (m) {
return m[1].toLowerCase();
}
element = element.parentElement;
}
return 'none';
},
setLanguage: function (element, language) {
element.className = element.className.replace(RegExp(lang, 'gi'), '');
element.classList.add('language-' + language);
},
currentScript: function () {
if (typeof document === 'undefined') {
return null;
}
if (document.currentScript && document.currentScript.tagName === 'SCRIPT' && 1 < 2 ) {
return (document.currentScript);
}
try {
throw new Error();
} catch (err) {
var src = (/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(err.stack) || [])[1];
if (src) {
var scripts = document.getElementsByTagName('script');
for (var i in scripts) {
if (scripts[i].src == src) {
return scripts[i];
}
}
}
return null;
}
},
isActive: function (element, className, defaultActivation) {
var no = 'no-' + className;
while (element) {
var classList = element.classList;
if (classList.contains(className)) {
return true;
}
if (classList.contains(no)) {
return false;
}
element = element.parentElement;
}
return !!defaultActivation;
}
},
languages: {
plain: plainTextGrammar,
plaintext: plainTextGrammar,
text: plainTextGrammar,
txt: plainTextGrammar,
extend: function (id, redef) {
var lang = _.util.clone(_.languages[id]);
for (var key in redef) {
lang[key] = redef[key];
}
return lang;
},
insertBefore: function (inside, before, insert, root) {
root = root || (_.languages);
var grammar = root[inside];
var ret = {};
for (var token in grammar) {
if (grammar.hasOwnProperty(token)) {
if (token == before) {
for (var newToken in insert) {
if (insert.hasOwnProperty(newToken)) {
ret[newToken] = insert[newToken];
}
}
}
if (!insert.hasOwnProperty(token)) {
ret[token] = grammar[token];
}
}
}
var old = root[inside];
root[inside] = ret;
_.languages.DFS(_.languages, function (key, value) {
if (value === old && key != inside) {
this[key] = ret;
}
});
return ret;
},
DFS: function DFS(o, callback, type, visited) {
visited = visited || {};
var objId = _.util.objId;
for (var i in o) {
if (o.hasOwnProperty(i)) {
callback.call(o, i, o[i], type || i);
var property = o[i];
var propertyType = _.util.type(property);
if (propertyType === 'Object' && !visited[objId(property)]) {
visited[objId(property)] = true;
DFS(property, callback, null, visited);
} else if (propertyType === 'Array' && !visited[objId(property)]) {
visited[objId(property)] = true;
DFS(property, callback, i, visited);
}
}
}
}
},
plugins: {},
highlightAll: function (async, callback) {
_.highlightAllUnder(document, async, callback);
},
highlightAllUnder: function (container, async, callback) {
var env = {
callback: callback,
container: container,
selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
};
_.hooks.run('before-highlightall', env);
env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));
_.hooks.run('before-all-elements-highlight', env);
for (var i = 0, element; (element = env.elements[i++]);) {
_.highlightElement(element, async === true, env.callback);
}
},
highlightElement: function (element, async, callback) {
var language = _.util.getLanguage(element);
var grammar = _.languages[language];
_.util.setLanguage(element, language);
var parent = element.parentElement;
if (parent && parent.nodeName.toLowerCase() === 'pre') {
_.util.setLanguage(parent, language);
}
var code = element.textContent;
var env = {
element: element,
language: language,
grammar: grammar,
code: code
};
function insertHighlightedCode(highlightedCode) {
env.highlightedCode = highlightedCode;
_.hooks.run('before-insert', env);
env.element.innerHTML = env.highlightedCode;
_.hooks.run('after-highlight', env);
_.hooks.run('complete', env);
callback && callback.call(env.element);
}
_.hooks.run('before-sanity-check', env);
parent = env.element.parentElement;
if (parent && parent.nodeName.toLowerCase() === 'pre' && !parent.hasAttribute('tabindex')) {
parent.setAttribute('tabindex', '0');
}
if (!env.code) {
_.hooks.run('complete', env);
callback && callback.call(env.element);
return;
}
_.hooks.run('before-highlight', env);
if (!env.grammar) {
insertHighlightedCode(_.util.encode(env.code));
return;
}
if (async && _self.Worker) {
var worker = new Worker(_.filename);
worker.onmessage = function (evt) {
insertHighlightedCode(evt.data);
};
worker.postMessage(JSON.stringify({
language: env.language,
code: env.code,
immediateClose: true
}));
} else {
insertHighlightedCode(_.highlight(env.code, env.grammar, env.language));
}
},
highlight: function (text, grammar, language) {
var env = {
code: text,
grammar: grammar,
language: language
};
_.hooks.run('before-tokenize', env);
if (!env.grammar) {
throw new Error('The language "' + env.language + '" has no grammar.');
}
env.tokens = _.tokenize(env.code, env.grammar);
_.hooks.run('after-tokenize', env);
return Token.stringify(_.util.encode(env.tokens), env.language);
},
tokenize: function (text, grammar) {
var rest = grammar.rest;
if (rest) {
for (var token in rest) {
grammar[token] = rest[token];
}
delete grammar.rest;
}
var tokenList = new LinkedList();
addAfter(tokenList, tokenList.head, text);
matchGrammar(text, tokenList, grammar, tokenList.head, 0);
return toArray(tokenList);
},
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);
}
}
},
Token: Token
};
_self.Prism = _;
function Token(type, content, alias, matchedStr) {
this.type = type;
this.content = content;
this.alias = alias;
this.length = (matchedStr || '').length | 0;
}
Token.stringify = function stringify(o, language) {
if (typeof o == 'string') {
return o;
}
if (Array.isArray(o)) {
var s = '';
o.forEach(function (e) {
s += stringify(e, language);
});
return s;
}
var env = {
type: o.type,
content: stringify(o.content, language),
tag: 'span',
classes: ['token', o.type],
attributes: {},
language: language
};
var aliases = o.alias;
if (aliases) {
if (Array.isArray(aliases)) {
Array.prototype.push.apply(env.classes, aliases);
} else {
env.classes.push(aliases);
}
}
_.hooks.run('wrap', env);
var attributes = '';
for (var name in env.attributes) {
attributes += ' ' + name + '="' + (env.attributes[name] || '').replace(/"/g, '"') + '"';
}
return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + attributes + '>' + env.content + '</' + env.tag + '>';
};
function matchPattern(pattern, pos, text, lookbehind) {
pattern.lastIndex = pos;
var match = pattern.exec(text);
if (match && lookbehind && match[1]) {
var lookbehindLength = match[1].length;
match.index += lookbehindLength;
match[0] = match[0].slice(lookbehindLength);
}
return match;
}
function matchGrammar(text, tokenList, grammar, startNode, startPos, rematch) {
for (var token in grammar) {
if (!grammar.hasOwnProperty(token) || !grammar[token]) {
continue;
}
var patterns = grammar[token];
patterns = Array.isArray(patterns) ? patterns : [patterns];
for (var j = 0; j < patterns.length; ++j) {
if (rematch && rematch.cause == token + ',' + j) {
return;
}
var patternObj = patterns[j];
var inside = patternObj.inside;
var lookbehind = !!patternObj.lookbehind;
var greedy = !!patternObj.greedy;
var alias = patternObj.alias;
if (greedy && !patternObj.pattern.global) {
var flags = patternObj.pattern.toString().match(/[imsuy]*$/)[0];
patternObj.pattern = RegExp(patternObj.pattern.source, flags + 'g');
}
var pattern = patternObj.pattern || patternObj;
for (
var currentNode = startNode.next, pos = startPos;
currentNode !== tokenList.tail;
pos += currentNode.value.length, currentNode = currentNode.next
) {
if (rematch && pos >= rematch.reach) {
break;
}
var str = currentNode.value;
if (tokenList.length > text.length) {
return;
}
if (str instanceof Token) {
continue;
}
var removeCount = 1;
var match;
if (greedy) {
match = matchPattern(pattern, pos, text, lookbehind);
if (!match || match.index >= text.length) {
break;
}
var from = match.index;
var to = match.index + match[0].length;
var p = pos;
p += currentNode.value.length;
while (from >= p) {
currentNode = currentNode.next;
p += currentNode.value.length;
}
p -= currentNode.value.length;
pos = p;
if (currentNode.value instanceof Token) {
continue;
}
for (
var k = currentNode;
k !== tokenList.tail && (p < to || typeof k.value === 'string');
k = k.next
) {
removeCount++;
p += k.value.length;
}
removeCount--;
str = text.slice(pos, p);
match.index -= pos;
} else {
match = matchPattern(pattern, 0, str, lookbehind);
if (!match) {
continue;
}
}
var from = match.index;
var matchStr = match[0];
var before = str.slice(0, from);
var after = str.slice(from + matchStr.length);
var reach = pos + str.length;
if (rematch && reach > rematch.reach) {
rematch.reach = reach;
}
var removeFrom = currentNode.prev;
if (before) {
removeFrom = addAfter(tokenList, removeFrom, before);
pos += before.length;
}
removeRange(tokenList, removeFrom, removeCount);
var wrapped = new Token(token, inside ? _.tokenize(matchStr, inside) : matchStr, alias, matchStr);
currentNode = addAfter(tokenList, removeFrom, wrapped);
if (after) {
addAfter(tokenList, currentNode, after);
}
if (removeCount > 1) {
var nestedRematch = {
cause: token + ',' + j,
reach: reach
};
matchGrammar(text, tokenList, grammar, currentNode.prev, pos, nestedRematch);
if (rematch && nestedRematch.reach > rematch.reach) {
rematch.reach = nestedRematch.reach;
}
}
}
}
}
}
function LinkedList() {
var head = { value: null, prev: null, next: null };
var tail = { value: null, prev: head, next: null };
head.next = tail;
this.head = head;
this.tail = tail;
this.length = 0;
}
function addAfter(list, node, value) {
var next = node.next;
var newNode = { value: value, prev: node, next: next };
node.next = newNode;
next.prev = newNode;
list.length++;
return newNode;
}
function removeRange(list, node, count) {
var next = node.next;
for (var i = 0; i < count && next !== list.tail; i++) {
next = next.next;
}
node.next = next;
next.prev = node;
list.length -= i;
}
function toArray(list) {
var array = [];
var node = list.head.next;
while (node !== list.tail) {
array.push(node.value);
node = node.next;
}
return array;
}
if (!_self.document) {
if (!_self.addEventListener) {
return _;
}
if (!_.disableWorkerMessageHandler) {
_self.addEventListener('message', function (evt) {
var message = JSON.parse(evt.data);
var lang = message.language;
var code = message.code;
var immediateClose = message.immediateClose;
_self.postMessage(_.highlight(code, _.languages[lang], lang));
if (immediateClose) {
_self.close();
}
}, false);
}
return _;
}
var script = _.util.currentScript();
if (script) {
_.filename = script.src;
if (script.hasAttribute('data-manual')) {
_.manual = true;
}
}
function highlightAutomaticallyCallback() {
if (!_.manual) {
_.highlightAll();
}
}
if (!_.manual) {
var readyState = document.readyState;
if (readyState === 'loading' || readyState === 'interactive' && script && script.defer) {
document.addEventListener('DOMContentLoaded', highlightAutomaticallyCallback);
} else {
if (window.requestAnimationFrame) {
window.requestAnimationFrame(highlightAutomaticallyCallback);
} else {
window.setTimeout(highlightAutomaticallyCallback, 16);
}
}
}
return _;
}(_self));
if (typeof module !== 'undefined' && module.exports) {
module.exports = Prism;
}
if (typeof global !== 'undefined') {
global.Prism = Prism;
}
Prism.languages.markup = {
'comment': {
pattern: /<!--(?:(?!<!--)[\s\S])*?-->/,
greedy: true
},
'prolog': {
pattern: /<\?[\s\S]+?\?>/,
greedy: true
},
'doctype': {
pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
greedy: true,
inside: {
'internal-subset': {
pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/,
lookbehind: true,
greedy: true,
inside: null
},
'string': {
pattern: /"[^"]*"|'[^']*'/,
greedy: true
},
'punctuation': /^<!|>$|[[\]]/,
'doctype-tag': /^DOCTYPE/i,
'name': /[^\s<>'"]+/
}
},
'cdata': {
pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
greedy: true
},
'tag': {
pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
greedy: true,
inside: {
'tag': {
pattern: /^<\/?[^\s>\/]+/,
inside: {
'punctuation': /^<\/?/,
'namespace': /^[^\s>\/:]+:/
}
},
'special-attr': [],
'attr-value': {
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
inside: {
'punctuation': [
{
pattern: /^=/,
alias: 'attr-equals'
},
{
pattern: /^(\s*)["']|["']$/,
lookbehind: true
}
]
}
},
'punctuation': /\/?>/,
'attr-name': {
pattern: /[^\s>\/]+/,
inside: {
'namespace': /^[^\s>\/:]+:/
}
}
}
},
'entity': [
{
pattern: /&[\da-z]{1,8};/i,
alias: 'named-entity'
},
/&#x?[\da-f]{1,8};/i
]
};
Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] =
Prism.languages.markup['entity'];
Prism.languages.markup['doctype'].inside['internal-subset'].inside = Prism.languages.markup;
Prism.hooks.add('wrap', function (env) {
if (env.type === 'entity') {
env.attributes['title'] = env.content.replace(/&/, '&');
}
});
Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
value: function addInlined(tagName, lang) {
var includedCdataInside = {};
includedCdataInside['language-' + lang] = {
pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
lookbehind: true,
inside: Prism.languages[lang]
};
includedCdataInside['cdata'] = /^<!\[CDATA\[|\]\]>$/i;
var inside = {
'included-cdata': {
pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
inside: includedCdataInside
}
};
inside['language-' + lang] = {
pattern: /[\s\S]+/,
inside: Prism.languages[lang]
};
var def = {};
def[tagName] = {
pattern: RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function () { return tagName; }), 'i'),
lookbehind: true,
greedy: true,
inside: inside
};
Prism.languages.insertBefore('markup', 'cdata', def);
}
});
Object.defineProperty(Prism.languages.markup.tag, 'addAttribute', {
value: function (attrName, lang) {
Prism.languages.markup.tag.inside['special-attr'].push({
pattern: RegExp(
/(^|["'\s])/.source + '(?:' + attrName + ')' + /\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,
'i'
),
lookbehind: true,
inside: {
'attr-name': /^[^\s=]+/,
'attr-value': {
pattern: /=[\s\S]+/,
inside: {
'value': {
pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
lookbehind: true,
alias: [lang, 'language-' + lang],
inside: Prism.languages[lang]
},
'punctuation': [
{
pattern: /^=/,
alias: 'attr-equals'
},
/"|'/
]
}
}
}
});
}
});
Prism.languages.html = Prism.languages.markup;
Prism.languages.mathml = Prism.languages.markup;
Prism.languages.svg = Prism.languages.markup;
Prism.languages.xml = Prism.languages.extend('markup', {});
Prism.languages.ssml = Prism.languages.xml;
Prism.languages.atom = Prism.languages.xml;
Prism.languages.rss = Prism.languages.xml;
(function (Prism) {
var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
Prism.languages.css = {
'comment': /\/\*[\s\S]*?\*\//,
'atrule': {
pattern: RegExp('@[\\w-](?:' + /[^;{\s"']|\s+(?!\s)/.source + '|' + string.source + ')*?' + /(?:;|(?=\s*\{))/.source),
inside: {
'rule': /^@[\w-]+/,
'selector-function-argument': {
pattern: /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
lookbehind: true,
alias: 'selector'
},
'keyword': {
pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
lookbehind: true
}
}
},
'url': {
pattern: RegExp('\\burl\\((?:' + string.source + '|' + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ')\\)', 'i'),
greedy: true,
inside: {
'function': /^url/i,
'punctuation': /^\(|\)$/,
'string': {
pattern: RegExp('^' + string.source + '$'),
alias: 'url'
}
}
},
'selector': {
pattern: RegExp('(^|[{}\\s])[^{}\\s](?:[^{};"\'\\s]|\\s+(?![\\s{])|' + string.source + ')*(?=\\s*\\{)'),
lookbehind: true
},
'string': {
pattern: string,
greedy: true
},
'property': {
pattern: /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
lookbehind: true
},
'important': /!important\b/i,
'function': {
pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,
lookbehind: true
},
'punctuation': /[(){};:,]/
};
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
var markup = Prism.languages.markup;
if (markup) {
markup.tag.addInlined('style', 'css');
markup.tag.addAttribute('style', 'css');
}
}(Prism));
Prism.languages.clike = {
'comment': [
{
pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
lookbehind: true,
greedy: true
},
{
pattern: /(^|[^\\:])\/\/.*/,
lookbehind: true,
greedy: true
}
],
'string': {
pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
greedy: true
},
'class-name': {
pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
lookbehind: true,
inside: {
'punctuation': /[.\\]/
}
},
'keyword': /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
'boolean': /\b(?:false|true)\b/,
'function': /\b\w+(?=\()/,
'number': /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
'operator': /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
'punctuation': /[{}[\];(),.:]/
};
Prism.languages.javascript = Prism.languages.extend('clike', {
'class-name': [
Prism.languages.clike['class-name'],
{
pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
lookbehind: true
}
],
'keyword': [
{
pattern: /((?:^|\})\s*)catch\b/,
lookbehind: true
},
{
pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
lookbehind: true
},
],
'function': /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
'number': {
pattern: RegExp(
/(^|[^\w$])/.source +
'(?:' +
(
/NaN|Infinity/.source +
'|' +
/0[bB][01]+(?:_[01]+)*n?/.source +
'|' +
/0[oO][0-7]+(?:_[0-7]+)*n?/.source +
'|' +
/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source +
'|' +
/\d+(?:_\d+)*n/.source +
'|' +
/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source
) +
')' +
/(?![\w$])/.source
),
lookbehind: true
},
'operator': /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
});
Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;
Prism.languages.insertBefore('javascript', 'keyword', {
'regex': {
pattern: RegExp(
/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source +
/\//.source +
'(?:' +
/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source +
'|' +
/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source +
')' +
/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source
),
lookbehind: true,
greedy: true,
inside: {
'regex-source': {
pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
lookbehind: true,
alias: 'language-regex',
inside: Prism.languages.regex
},
'regex-delimiter': /^\/|\/$/,
'regex-flags': /^[a-z]+$/,
}
},
'function-variable': {
pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,
alias: 'function'
},
'parameter': [
{
pattern: /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,
lookbehind: true,
inside: Prism.languages.javascript
},
{
pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,
lookbehind: true,
inside: Prism.languages.javascript
},
{
pattern: /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,
lookbehind: true,
inside: Prism.languages.javascript
},
{
pattern: /((?:\b|\s|^)(?!(?: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|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,
lookbehind: true,
inside: Prism.languages.javascript
}
],
'constant': /\b[A-Z](?:[A-Z_]|\dx?)*\b/
});
Prism.languages.insertBefore('javascript', 'string', {
'hashbang': {
pattern: /^#!.*/,
greedy: true,
alias: 'comment'
},
'template-string': {
pattern: /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,
greedy: true,
inside: {
'template-punctuation': {
pattern: /^`|`$/,
alias: 'string'
},
'interpolation': {
pattern: /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,
lookbehind: true,
inside: {
'interpolation-punctuation': {
pattern: /^\$\{|\}$/,
alias: 'punctuation'
},
rest: Prism.languages.javascript
}
},
'string': /[\s\S]+/
}
},
'string-property': {
pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
lookbehind: true,
greedy: true,
alias: 'property'
}
});
Prism.languages.insertBefore('javascript', 'operator', {
'literal-property': {
pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
lookbehind: true,
alias: 'property'
},
});
if (Prism.languages.markup) {
Prism.languages.markup.tag.addInlined('script', 'javascript');
Prism.languages.markup.tag.addAttribute(
/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,
'javascript'
);
}
Prism.languages.js = Prism.languages.javascript;
(function () {
if (typeof Prism === 'undefined' || typeof document === 'undefined') {
return;
}
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
var LOADING_MESSAGE = 'Loading…';
var FAILURE_MESSAGE = function (status, message) {
return '✖ Error ' + status + ' while fetching file: ' + message;
};
var FAILURE_EMPTY_MESSAGE = '✖ Error: File does not exist or is empty';
var EXTENSIONS = {
'js': 'javascript',
'py': 'python',
'rb': 'ruby',
'ps1': 'powershell',
'psm1': 'powershell',
'sh': 'bash',
'bat': 'batch',
'h': 'c',
'tex': 'latex'
};
var STATUS_ATTR = 'data-src-status';
var STATUS_LOADING = 'loading';
var STATUS_LOADED = 'loaded';
var STATUS_FAILED = 'failed';
var SELECTOR = 'pre[data-src]:not([' + STATUS_ATTR + '="' + STATUS_LOADED + '"])'
+ ':not([' + STATUS_ATTR + '="' + STATUS_LOADING + '"])';
function loadFile(src, success, error) {
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status < 400 && xhr.responseText) {
success(xhr.responseText);
} else {
if (xhr.status >= 400) {
error(FAILURE_MESSAGE(xhr.status, xhr.statusText));
} else {
error(FAILURE_EMPTY_MESSAGE);
}
}
}
};
xhr.send(null);
}
function parseRange(range) {
var m = /^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(range || '');
if (m) {
var start = Number(m[1]);
var comma = m[2];
var end = m[3];
if (!comma) {
return [start, start];
}
if (!end) {
return [start, undefined];
}
return [start, Number(end)];
}
return undefined;
}
Prism.hooks.add('before-highlightall', function (env) {
env.selector += ', ' + SELECTOR;
});
Prism.hooks.add('before-sanity-check', function (env) {
var pre = (env.element);
if (pre.matches(SELECTOR)) {
env.code = '';
pre.setAttribute(STATUS_ATTR, STATUS_LOADING);
var code = pre.appendChild(document.createElement('CODE'));
code.textContent = LOADING_MESSAGE;
var src = pre.getAttribute('data-src');
var language = env.language;
if (language === 'none') {
var extension = (/\.(\w+)$/.exec(src) || [, 'none'])[1];
language = EXTENSIONS[extension] || extension;
}
Prism.util.setLanguage(code, language);
Prism.util.setLanguage(pre, language);
var autoloader = Prism.plugins.autoloader;
if (autoloader) {
autoloader.loadLanguages(language);
}
loadFile(
src,
function (text) {
pre.setAttribute(STATUS_ATTR, STATUS_LOADED);
var range = parseRange(pre.getAttribute('data-range'));
if (range) {
var lines = text.split(/\r\n?|\n/g);
var start = range[0];
var end = range[1] == null ? lines.length : range[1];
if (start < 0) { start += lines.length; }
start = Math.max(0, Math.min(start - 1, lines.length));
if (end < 0) { end += lines.length; }
end = Math.max(0, Math.min(end, lines.length));
text = lines.slice(start, end).join('\n');
if (!pre.hasAttribute('data-start')) {
pre.setAttribute('data-start', String(start + 1));
}
}
code.textContent = text;
Prism.highlightElement(code);
},
function (error) {
pre.setAttribute(STATUS_ATTR, STATUS_FAILED);
code.textContent = error;
}
);
}
});
Prism.plugins.fileHighlight = {
highlight: function highlight(container) {
var elements = (container || document).querySelectorAll(SELECTOR);
for (var i = 0, element; (element = elements[i++]);) {
Prism.highlightElement(element);
}
}
};
var logged = false;
Prism.fileHighlight = function () {
if (!logged) {
console.warn('Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead.');
logged = true;
}
Prism.plugins.fileHighlight.highlight.apply(this, arguments);
};
}());
This page’s CSS code, highlighted with Prism:
@import url(https://fonts.googleapis.com/css?family=Questrial);
@import url(https://fonts.googleapis.com/css?family=Arvo);
section h1,
#features li strong,
header h2,
footer p {
font: 100% Rockwell, Arvo, serif;
}
* {
margin: 0;
padding: 0;
}
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,
section h2[id] > a {
text-decoration: none;
}
section h1 > a:before,
section h2[id] > 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,
section h2[id] > a:hover:before {
color: black;
background: #f1ad26;
}
p {
margin: 1em 0;
}
section h1,
h2,
h3 {
margin: 1em 0 .3em;
}
h2,
h3 {
font-weight: normal;
}
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;
}
mark {
outline: .4em solid red;
outline-offset: .4em;
margin: .4em 0;
background-color: transparent;
display: inline-block;
}
header,
body > section {
display: block;
max-width: 900px;
margin: auto;
}
header, footer {
position: relative;
padding: 30px -webkit-calc(50% - 450px);
padding: 30px calc(50% - 450px);
color: white;
text-shadow: 0 -1px 2px black, 0 0 4px black,
0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)), 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 .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 {
margin-top: 1.6em;
}
#features li {
margin: 0 0 1.6em 0;
list-style: none;
display: inline-block;
width: 49%;
box-sizing: border-box;
vertical-align: top;
}
#features li:nth-child(odd) {
padding-right: 2em;
}
#features li:nth-child(even) {
padding-left: 2em;
}
#features li:before {
content: '✓';
float: left;
margin-left: -.8em;
color: #7fab14;
font-size: 320%;
line-height: 1;
}
#features li strong {
display: block;
margin-bottom: .1em;
font-size: 160%;
}
header .download-button {
float: right;
margin: 0 0 .5em .5em;
}
#theme {
position: relative;
z-index: 1;
float: right;
margin-right: -9em;
text-align: center;
text-transform: uppercase;
letter-spacing: .2em;
text-shadow: 0 -1px 2px black;
}
#theme > p {
position: absolute;
left: 100%;
transform: translateX(50%) rotate(90deg) ;
transform-origin: top left;
font-size: 130%;
}
#theme > label {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 8.5em;
height: 8.5em;
line-height: 1em;
border-radius: 50%;
background: hsla(0,0%,100%,.5);
cursor: pointer;
font-size: 90%;
padding: 0;
}
#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;
left: 0;
clip: rect(0,0,0,0);
}
#theme > input:checked + label {
background: #7fab14;
}
@media (max-width: 1300px) and (min-width: 1051px) {
#theme {
position: relative;
z-index: 1;
float: left;
margin: 1em 0;
width: 100%;
}
#theme + * {
clear: both;
}
#theme > p {
margin-top: .5em;
}
#theme > label {
float: left;
font-size: 82.6%;
}
#theme > label:before {
display: none;
}
#theme > label:nth-of-type(n+2) {
margin-top: 0;
}
}
@media (max-width: 1050px) {
#theme {
position: relative;
z-index: 1;
float: left;
margin: 1em 0;
}
#theme + * {
clear: both;
}
#theme > p {
left: inherit;
right: -1em;
}
#theme > label {
float: left;
}
#theme > label:before {
display: none;
}
#theme > label:nth-of-type(n+2) {
margin-top: 0;
}
#theme > label:nth-of-type(n+5) {
margin-top: -2.5em;
}
#theme > label:nth-of-type(4n+1) {
margin-left: 12.5em;
}
}
@media (max-width: 800px) {
#theme > label:nth-of-type(4) {
margin-right: 4em;
}
#theme > label:nth-of-type(4n+1) {
margin-left: 4em;
}
}
footer {
margin-top: 2em;
background-position: bottom;
color: white;
}
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;
bottom: 15px;
max-width: calc(50% - 450px - 40px);
font-size: 80%;
z-index: 999;
background: white;
color: rgba(0,0,0,.5);
padding: 0 10px 10px;
border-radius: 0 3px 3px 0;
box-sizing: border-box;
}
@media (max-width: 1200px) {
#toc {
display: none;
}
}
#toc:hover {
color: rgba(0,0,0,1);
}
#toc h1 {
font-size: 180%;
margin-top: .75rem;
}
#toc li {
list-style: none;
line-height: 1.2;
padding: .2em 0;
}
#toc li a {
padding: .2em 0;
}
#logo {
float: right;
margin-block-start: 3.5em;
margin-inline-start: .5em;
height: 5em;
filter: brightness(0) invert(1);
}
.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 > 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;
}
ul.plugin-list {
column-count: 2;
}
ul.plugin-list > li {
break-inside: avoid;
page-break-inside: avoid;
}
ul.plugin-list > li > a {
font-size: 110%;
}
ul.plugin-list > li > div {
margin-bottom: .5em;
}
This page’s HTML, highlighted with Prism:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.console && console.log('foo');
</script>
<meta charset="utf-8" />
<link rel="icon" href="assets/favicon.png" />
<title>Prism</title>
<link rel="stylesheet" href="assets/style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<script src="assets/vendor/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="assets/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="https://www.smashingmagazine.com/" target="_blank"><img src="assets/img/logo-smashing.png" alt="Smashing Magazine" /></a>
<a href="https://alistapart.com/" target="_blank"><img src="assets/img/logo-ala.png" alt="A List Apart" /></a>
<a href="https://developer.mozilla.org/" target="_blank"><img src="assets/img/logo-mdn.png" alt="Mozilla Developer Network (MDN)" /></a>
<a href="https://css-tricks.com/" target="_blank"><img src="assets/img/logo-css-tricks.png" alt="CSS-Tricks" /></a>
<a href="https://www.sitepoint.com/" target="_blank"><img src="assets/img/logo-sitepoint.png" alt="SitePoint" /></a>
<a href="https://www.drupal.org/" target="_blank"><img src="assets/img/logo-drupal.png" alt="Drupal" /></a>
<a href="https://reactjs.org/" target="_blank"><img src="assets/img/logo-react.png" alt="React" /></a>
<a href="https://stripe.com/" target="_blank"><img src="assets/img/logo-stripe.png" alt="Stripe" /></a>
<a href="https://dev.mysql.com/" target="_blank"><img src="assets/img/logo-mysql.png" alt="MySQL" /></a>
</div>
</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="assets/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="assets/logo.svg"></pre>
<p>If you’re still not sold, you can <a href='/examples'>view more examples</a> or <a href='/test'>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 <code><pre></code> for blocks of code.
In addition, the language is defined through the way recommended in the HTML5 draft: through a <code>language-xxxx</code> class.</li>
<li>The <code>language-xxxx</code> class 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#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#language-definitions'>define new languages</a>.
The only thing you need is a good understanding of regular expressions.</li>
<li>All styling is done through CSS, with <a href='/faq#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: Edge, IE11, Firefox, Chrome, Safari, <a href='/faq#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>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#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 certain edge cases, which are documented in the <a href='/known-failures'>known failures page</a>.</li>
<li>Some of our themes have problems with certain layouts. Known cases are documented <a href='/known-failures#themes'>here</a>.</li>
<li>No IE 6-10 support. If someone can read code, they are probably in the 95% 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 <a href='/download'>downloaded</a> in your page. Example:
<pre><code><!DOCTYPE html>
<html>
<head>
...
<mark><link href="themes/prism.css" rel="stylesheet" /></mark>
</head>
<body>
...
<mark><script src="prism.js"></script></mark>
</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="https://www.w3.org/TR/html52/textlevel-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.
Alternatively, Prism also supports a shorter version: <code>lang-xxxx</code>.</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>Inline code snippets are done like this:</p>
<pre><code><code class="language-css">p { color: red }</code></code></pre>
<p><strong>Note</strong>: You have to escape all <code><</code> and <code>&</code> characters inside <code><code></code> elements (code blocks and inline snippets) with <code>&lt;</code> and <code>&amp;</code> respectively, or else the browser might interpret them as an HTML tag or <a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity">entity</a>. If you have large portions of HTML code, you can use the <a href="plugins/unescaped-markup/">Unescaped Markup plugin</a> to work around this.</p>
<h3>Language inheritance</h3>
<p>To make things easier however, Prism assumes that the language class 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>
<p>If you want to opt-out of highlighting a <code><code></code> element that inherits its language, you can add the <code>language-none</code> class to it. The <code>none</code> language can also be inherited to disable highlighting for the element with the class and all of its descendants.</p>
<p>If you want to opt-out of highlighting but still use plugins like <a href="plugins/show-invisibles/">Show Invisibles</a>, add use <code>language-plain</code> class instead.</p>
<h3>Manual highlighting</h3>
<p>If you want to prevent any elements from being automatically highlighted and instead use the <a href='/extending#api'>API</a>, you can set <a href='/docs/prism#.manual'><code class="language-javascript">Prism.manual</code></a> to <code class="language-javascript">true</code> before the <code>DOMContentLoaded</code> event is fired. By setting the <code>data-manual</code> attribute on the <code><script></code> element containing Prism core, this will be done automatically.
Example:</p>
<pre><code><script src="prism.js" data-manual></script></code></pre>
<p>or</p>
<pre><code><script>
window.Prism = window.Prism || {};
window.Prism.manual = true;
</script>
<script src="prism.js"></script></code></pre>
<h2 id="basic-usage-cdn">Usage with CDNs</h2>
<p>In combination with CDNs, we recommend using the <a href="plugins/autoloader">Autoloader plugin</a> which automatically loads languages when necessary.</p>
<p>The setup of the Autoloader, will look like the following. You can also add your own themes of course.</p>
<pre><code><!DOCTYPE html>
<html>
<head>
...
<mark><link href="https://{{cdn}}/prismjs@v1.x/themes/prism.css" rel="stylesheet" /></mark>
</head>
<body>
...
<mark> <script src="https://{{cdn}}/prismjs@v1.x/components/prism-core.min.js"></script>
<script src="https://{{cdn}}/prismjs@v1.x/plugins/autoloader/prism-autoloader.min.js"></script></mark>
</body>
</html></code></pre>
<p>Please note that links in the above code sample serve as placeholders. You have to replace them with valid links to the CDN of your choice.</p>
<p>CDNs which provide PrismJS are e.g. <a href="https://cdnjs.com/libraries/prism">cdnjs</a>, <a href="https://www.jsdelivr.com/package/npm/prismjs">jsDelivr</a>, and <a href="https://unpkg.com/browse/prismjs@1/">UNPKG</a>.</p>
<h2 id="basic-usage-bundlers">Usage with Webpack, Browserify, & Other Bundlers</h2>
<p>If you want to use Prism with a bundler, install Prism with <code>npm</code>:</p>
<pre><code>$ npm install prismjs</code></pre>
<p>You can then <code class="language-js">import</code> into your bundle:</p>
<pre><code class="language-js">import Prism from 'prismjs';</code></pre>
<p>To make it easy to configure your Prism instance with only the languages and plugins you need, use the babel plugin,
<a href="https://github.com/mAAdhaTTah/babel-plugin-prismjs">babel-plugin-prismjs</a>. This will allow you to load
the minimum number of languages and plugins to satisfy your needs.
See that plugin's documentation for configuration details.</p>
<h2 id="basic-usage-node">Usage with Node</h2>
<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>Example:</p>
<pre><code class="language-js">const Prism = require('prismjs');
// The code snippet you want to highlight, as a string
const code = `var data = 1;`;
// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');</code></pre>
<p>Requiring <code>prismjs</code> will load the default languages: <code>markup</code>, <code>css</code>,
<code>clike</code> and <code>javascript</code>. You can load more languages with the
<code class="language-javascript">loadLanguages()</code> utility, which will automatically handle any required dependencies.</p>
<p>Example:</p>
<pre><code class="language-js">const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['haml']);
// The code snippet you want to highlight, as a string
const code = `= ['hi', 'there', 'reader!'].join " "`;
// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.haml, 'haml');</code></pre>
<p><strong>Note</strong>: Do <em>not</em> use <code class="language-javascript">loadLanguages()</code> with Webpack or another bundler, as this will cause Webpack to include all languages and plugins. Use the babel plugin described above.</p>
<p><strong>Note</strong>: <code class="language-javascript">loadLanguages()</code> will ignore unknown languages and log warning messages to the console. You can prevent the warnings by setting <code class="language-javascript">loadLanguages.silent = true</code>.</p>
</section>
<section 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> (or <code>lang-xxxx</code>) class:</p>
<div id="languages-list"></div>
<p>Couldn’t find the language you were looking for? <a href="https://github.com/PrismJS/prism/issues" target="_blank">Request it</a>!</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 language-none"></ul>
<p>No assembly required to use them. Just select them in the <a href='/download'>download</a> page.</p>
<p>It’s very easy to <a href='/extending#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>
<li><a href="https://github.com/Liquibase/prism-liquibase">Liquibase CLI Bash language extension</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://startblogging101.com/how-to-add-prism-js-syntax-highlighting-wordpress/">How to Add Prism.js Syntax Highlighting to Your WordPress Site</a></li>
<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://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="https://www.stramaxon.com/2012/07/prism-syntax-highlighter-for-blogger.html">Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot</a></li>
<li><a href="https://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="https://www.semisedlak.com/highlight-your-code-syntax-with-prismjs">Highlight your code syntax with Prism.js</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>
<li><a href="https://auralinna.blog/post/2017/code-syntax-highlighting-with-angular-and-prismjs">Code syntax highlighting with Angular and Prism.js</a></li>
<li><a href="https://mkaz.blog/wordpress/code-syntax-highlighting-in-gutenberg/">Code syntax highlighting in Gutenberg, WordPress block editor</a></li>
<li><a href="https://karlkaufmann.com/writing/technotes/code-highlighting-prism-drupal">Code Highlighting with Prism.js in Drupal</a></li>
<li><a href="https://betterstack.dev/blog/code-highlighting-in-react-using-prismjs/">Code highlighting in React using Prism.js</a></li>
<li><a href="https://www.akashmittal.com/react-native-prismjs-using-webview/">Using Prism.js in React Native</a></li>
<li><a href="https://itsmycode.com/prismjs-tutorial/">PrismJS Tutorial | Implement Prism in HTML and React</a></li>
<li>Code syntax highlighting in Pug with <a href="https://webdiscus.github.io/pug-loader/pug-filters/highlight.html">:highlight</a> and <a href="https://webdiscus.github.io/pug-loader/pug-filters/markdown.html">:markdown</a> filters using <a href="https://github.com/webdiscus/pug-loader">pug-loader</a> and Prism.js</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/RunDevelopment">Michael Schmidt</a>, <a href="https://github.com/mAAdhaTTah">James DiGioia</a>, <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="https://stellarr.deviantart.com/">stellarr</a> for the <a href="https://stellarr.deviantart.com/art/Spectra-Wallpaper-Pack-97785901">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="assets/templates/footer.html" data-type="text/html"></footer>
<script src="assets/vendor/utopia.js"></script>
<script src="prism.js"></script>
<script src="plugins/keep-markup/prism-keep-markup.js"></script>
<script src="components.js"></script>
<script src="assets/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 lang = languages[id];
var name = lang.title || lang;
var contents = [
name,
' - ',
{
tag: 'code',
contents: id
}
];
var alias = lang.alias;
if (typeof alias === 'string')
alias = [alias];
if (alias) {
for (var i = 0, l = alias.length; i < l; i++) {
contents.push(
', ',
{
tag: 'code',
contents: alias[i]
});
}
}
languageItems.push({
tag: 'li',
attributes: {
'data-id': id
},
contents: contents
});
}
$u.element.create('ul', {
contents: languageItems,
inside: '#languages-list'
});
$u.element.contents($('#languages-list-count'), count);
}());
</script>
</body>
</html>
This page’s logo (SVG), highlighted with Prism:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 170">
<path fill="#fff" d="M55.37 131.5H48.4v9.13h6.97c1.67 0 2.92-.4 3.78-1.22.85
-.8 1.28-1.92 1.28-3.33s-.43-2.54-1.28-3.35c-.86-.8-2.12-1.2-3.78-1.2m29.52
6.4c.3-.53.47-1.2.47-2.04 0-1.35-.45-2.4-1.37-3.2-.92-.76-2.14-1.15-3.65
-1.15H72.9v8.52h7.32c2.26 0 3.82-.7 4.67-2.1M100 0L0 170h200L100 0M60.86
141.03c-1.3 1.22-3.1 1.84-5.33 1.84H48.4v7.55H46v-21.2h9.53c2.24 0 4.02.63
5.34 1.87 1.3 1.23 1.96 2.88 1.96 4.95 0 2.1-.66 3.75-1.97 4.98m24.5 9.4l
-5.1-8.14h-7.37v8.12h-2.4v-21.2h10.14c2.15 0 3.88.6 5.18 1.8 1.3 1.18 1.95
2.8 1.95 4.84 0 2.64-1.1 4.44-3.3 5.4-.6.28-1.22.5-1.82.6l5.57 8.56h-2.85m
13.43 0h-2.4v-21.2h2.4v21.2m23.56-1.32c-1.48 1.05-3.53 1.57-6.16 1.57-2.96 0
-5.23-.6-6.78-1.85-1.4-1.1-2.18-2.7-2.37-4.74h2.5c.08 1.45.78 2.56 2.1 3.33
1.16.67 2.68 1 4.58 1 3.97 0 5.95-1.25 5.95-3.74 0-.86-.35-1.53-1.07-2.02-.7
-.5-1.6-.9-2.68-1.2-1.07-.33-2.24-.63-3.48-.9s-2.4-.65-3.5-1.08-1.97-1.02
-2.68-1.73c-.7-.72-1.07-1.68-1.07-2.9 0-1.73.65-3.13 1.97-4.22 1.32-1.08
3.32-1.62 6-1.62 2.67 0 4.75.6 6.23 1.85 1.34 1.1 2.05 2.5 2.14 4.2h-2.46c
-.22-1.76-1.35-2.92-3.4-3.5-.72-.2-1.62-.3-2.7-.3s-1.98.1-2.72.35c-.74.25
-1.3.55-1.7.9-.42.35-.7.74-.83 1.17s-.2.88-.2 1.36c0 .5.2.93.62 1.33s.96.75
1.65 1.03c.68.28 1.46.52 2.33.73.88.2 1.77.43 2.67.65.9.22 1.8.48 2.68.77.87
.3 1.65.65 2.33 1.1 1.53.96 2.28 2.27 2.28 3.94 0 2-.74 3.5-2.22 4.55m28.84
1.32v-17.54l-7.84 10.08-7.97-10.08v17.54H133v-21.2h2.78l7.58 10.06 7.45
-10.05h2.8v21.2h-2.4"/>
</svg>
If you’re still not sold, you can view more examples or try it out for yourself.
You will need to include the prism.css and prism.js files you downloaded in your page. Example:
<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
Prism does its best to encourage good authoring practices. Therefore, it only works with <code> elements, since marking up code without a <code> element is semantically invalid.
According to the HTML5 spec, the recommended way to define a code language is a language-xxxx class, which is what Prism uses.
Alternatively, Prism also supports a shorter version: lang-xxxx.
The recommended way to mark up a code block
(both for semantics and for Prism) is a <pre> element with a <code> element inside, like so:
<pre><code class="language-css">p { color: red }</code></pre>
If you use that pattern, the <pre> will automatically get the language-xxxx class (if it doesn’t already have it) and will be styled as a code block.
Inline code snippets are done like this:
<code class="language-css">p { color: red }</code>
Note: You have to escape all < and & characters inside <code> elements (code blocks and inline snippets) with < and & respectively, or else the browser might interpret them as an HTML tag or entity. If you have large portions of HTML code, you can use the Unescaped Markup plugin to work around this.
Language inheritance
To make things easier however, Prism assumes that the language class is inherited. Therefore, if multiple <code> elements have the same language, you can add the language-xxxx class on one of their common ancestors.
This way, you can also define a document-wide default language, by adding a language-xxxx class on the <body> or <html> element.
If you want to opt-out of highlighting a <code> element that inherits its language, you can add the language-none class to it. The none language can also be inherited to disable highlighting for the element with the class and all of its descendants.
If you want to opt-out of highlighting but still use plugins like Show Invisibles, add use language-plain class instead.
Manual highlighting
If you want to prevent any elements from being automatically highlighted and instead use the API, you can set Prism.manual to true before the DOMContentLoaded event is fired. By setting the data-manual attribute on the <script> element containing Prism core, this will be done automatically.
Example:
<script src="prism.js" data-manual></script>
or
<script>
window.Prism = window.Prism || {};
window.Prism.manual = true;
</script>
<script src="prism.js"></script>
In combination with CDNs, we recommend using the Autoloader plugin which automatically loads languages when necessary.
The setup of the Autoloader, will look like the following. You can also add your own themes of course.
<!DOCTYPE html>
<html>
<head>
...
<link href="https://{{cdn}}/prismjs@v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="https://{{cdn}}/prismjs@v1.x/components/prism-core.min.js"></script>
<script src="https://{{cdn}}/prismjs@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>
Please note that links in the above code sample serve as placeholders. You have to replace them with valid links to the CDN of your choice.
CDNs which provide PrismJS are e.g. cdnjs, jsDelivr, and UNPKG.
If you want to use Prism with a bundler, install Prism with npm:
$ npm install prismjs
You can then import into your bundle:
import Prism from 'prismjs';
To make it easy to configure your Prism instance with only the languages and plugins you need, use the babel plugin,
babel-plugin-prismjs. This will allow you to load
the minimum number of languages and plugins to satisfy your needs.
See that plugin's documentation for configuration details.
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 AMP pages.
Example:
const Prism = require('prismjs');
const code = `var data = 1;`;
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');
Requiring prismjs will load the default languages: markup, css,
clike and javascript. You can load more languages with the
loadLanguages() utility, which will automatically handle any required dependencies.
Example:
const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['haml']);
const code = `= ['hi', 'there', 'reader!'].join " "`;
const html = Prism.highlight(code, Prism.languages.haml, 'haml');
Note: Do not use loadLanguages() with Webpack or another bundler, as this will cause Webpack to include all languages and plugins. Use the babel plugin described above.
Note: loadLanguages() will ignore unknown languages and log warning messages to the console. You can prevent the warnings by setting loadLanguages.silent = true.
