Created
May 20, 2015 19:54
-
-
Save AdrianoFerrari/504e0d523cc3fcfee214 to your computer and use it in GitHub Desktop.
Use Prism.js to highlight code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script>/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+ruby&plugins=show-language */ | |
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 _ = self.Prism = { | |
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(/</g, '<').replace(/\u00a0/g, ' '); | |
} | |
}, | |
type: function (o) { | |
return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1]; | |
}, | |
// Deep clone a language definition (e.g. to extend it) | |
clone: function (o) { | |
var type = _.util.type(o); | |
switch (type) { | |
case 'Object': | |
var clone = {}; | |
for (var key in o) { | |
if (o.hasOwnProperty(key)) { | |
clone[key] = _.util.clone(o[key]); | |
} | |
} | |
return clone; | |
case 'Array': | |
return o.map(function(v) { return _.util.clone(v); }); | |
} | |
return o; | |
} | |
}, | |
languages: { | |
extend: function (id, redef) { | |
var lang = _.util.clone(_.languages[id]); | |
for (var key in redef) { | |
lang[key] = redef[key]; | |
} | |
return lang; | |
}, | |
/** | |
* Insert a token before another token in a language literal | |
* As this needs to recreate the object (we cannot actually insert before keys in object literals), | |
* we cannot just provide an object, we need anobject and a key. | |
* @param inside The key (or language id) of the parent | |
* @param before The key to insert before. If not provided, the function appends instead. | |
* @param insert Object with the key/value pairs to insert | |
* @param root The object that contains `inside`. If equal to Prism.languages, it can be omitted. | |
*/ | |
insertBefore: function (inside, before, insert, root) { | |
root = root || _.languages; | |
var grammar = root[inside]; | |
if (arguments.length == 2) { | |
insert = arguments[1]; | |
for (var newToken in insert) { | |
if (insert.hasOwnProperty(newToken)) { | |
grammar[newToken] = insert[newToken]; | |
} | |
} | |
return grammar; | |
} | |
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]; | |
} | |
} | |
} | |
ret[token] = grammar[token]; | |
} | |
} | |
// Update references in other language definitions | |
_.languages.DFS(_.languages, function(key, value) { | |
if (value === root[inside] && key != inside) { | |
this[key] = ret; | |
} | |
}); | |
return root[inside] = ret; | |
}, | |
// Traverse a language definition with Depth First Search | |
DFS: function(o, callback, type) { | |
for (var i in o) { | |
if (o.hasOwnProperty(i)) { | |
callback.call(o, i, o[i], type || i); | |
if (_.util.type(o[i]) === 'Object') { | |
_.languages.DFS(o[i], callback); | |
} | |
else if (_.util.type(o[i]) === 'Array') { | |
_.languages.DFS(o[i], callback, i); | |
} | |
} | |
} | |
} | |
}, | |
highlightAll: function(async, callback) { | |
var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'); | |
for (var i=0, element; element = elements[i++];) { | |
_.highlightElement(element, async === true, callback); | |
} | |
}, | |
highlightElement: function(element, async, callback) { | |
// Find language | |
var language, grammar, parent = element; | |
while (parent && !lang.test(parent.className)) { | |
parent = parent.parentNode; | |
} | |
if (parent) { | |
language = (parent.className.match(lang) || [,''])[1]; | |
grammar = _.languages[language]; | |
} | |
if (!grammar) { | |
return; | |
} | |
// Set language on the element, if not present | |
element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; | |
// Set language on the parent, for styling | |
parent = element.parentNode; | |
if (/pre/i.test(parent.nodeName)) { | |
parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; | |
} | |
var code = element.textContent; | |
if(!code) { | |
return; | |
} | |
code = code.replace(/^(?:\r?\n|\r)/,''); | |
var env = { | |
element: element, | |
language: language, | |
grammar: grammar, | |
code: code | |
}; | |
_.hooks.run('before-highlight', env); | |
if (async && self.Worker) { | |
var worker = new Worker(_.filename); | |
worker.onmessage = function(evt) { | |
env.highlightedCode = Token.stringify(JSON.parse(evt.data), language); | |
_.hooks.run('before-insert', env); | |
env.element.innerHTML = env.highlightedCode; | |
callback && callback.call(env.element); | |
_.hooks.run('after-highlight', env); | |
}; | |
worker.postMessage(JSON.stringify({ | |
language: env.language, | |
code: env.code | |
})); | |
} | |
else { | |
env.highlightedCode = _.highlight(env.code, env.grammar, env.language); | |
_.hooks.run('before-insert', env); | |
env.element.innerHTML = env.highlightedCode; | |
callback && callback.call(element); | |
_.hooks.run('after-highlight', env); | |
} | |
}, | |
highlight: function (text, grammar, language) { | |
var tokens = _.tokenize(text, grammar); | |
return Token.stringify(_.util.encode(tokens), language); | |
}, | |
tokenize: function(text, grammar, language) { | |
var Token = _.Token; | |
var strarr = [text]; | |
var rest = grammar.rest; | |
if (rest) { | |
for (var token in rest) { | |
grammar[token] = rest[token]; | |
} | |
delete grammar.rest; | |
} | |
tokenloop: for (var token in grammar) { | |
if(!grammar.hasOwnProperty(token) || !grammar[token]) { | |
continue; | |
} | |
var patterns = grammar[token]; | |
patterns = (_.util.type(patterns) === "Array") ? patterns : [patterns]; | |
for (var j = 0; j < patterns.length; ++j) { | |
var pattern = patterns[j], | |
inside = pattern.inside, | |
lookbehind = !!pattern.lookbehind, | |
lookbehindLength = 0, | |
alias = pattern.alias; | |
pattern = pattern.pattern || pattern; | |
for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop | |
var str = strarr[i]; | |
if (strarr.length > text.length) { | |
// Something went terribly wrong, ABORT, ABORT! | |
break tokenloop; | |
} | |
if (str instanceof Token) { | |
continue; | |
} | |
pattern.lastIndex = 0; | |
var match = pattern.exec(str); | |
if (match) { | |
if(lookbehind) { | |
lookbehindLength = match[1].length; | |
} | |
var from = match.index - 1 + lookbehindLength, | |
match = match[0].slice(lookbehindLength), | |
len = match.length, | |
to = from + len, | |
before = str.slice(0, from + 1), | |
after = str.slice(to + 1); | |
var args = [i, 1]; | |
if (before) { | |
args.push(before); | |
} | |
var wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias); | |
args.push(wrapped); | |
if (after) { | |
args.push(after); | |
} | |
Array.prototype.splice.apply(strarr, args); | |
} | |
} | |
} | |
} | |
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) { | |
this.type = type; | |
this.content = content; | |
this.alias = alias; | |
}; | |
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 (env.type == 'comment') { | |
env.attributes['spellcheck'] = 'true'; | |
} | |
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 = ''; | |
for (var name in env.attributes) { | |
attributes += name + '="' + (env.attributes[name] || '') + '"'; | |
} | |
return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>'; | |
}; | |
if (!self.document) { | |
if (!self.addEventListener) { | |
// in Node.js | |
return self.Prism; | |
} | |
// In worker | |
self.addEventListener('message', function(evt) { | |
var message = JSON.parse(evt.data), | |
lang = message.language, | |
code = message.code; | |
self.postMessage(JSON.stringify(_.util.encode(_.tokenize(code, _.languages[lang])))); | |
self.close(); | |
}, false); | |
return self.Prism; | |
} | |
// Get current script and highlight | |
var script = document.getElementsByTagName('script'); | |
script = script[script.length - 1]; | |
if (script) { | |
_.filename = script.src; | |
if (document.addEventListener && !script.hasAttribute('data-manual')) { | |
document.addEventListener('DOMContentLoaded', _.highlightAll); | |
} | |
} | |
return self.Prism; | |
})(); | |
if (typeof module !== 'undefined' && module.exports) { | |
module.exports = Prism; | |
} | |
; | |
Prism.languages.markup = { | |
'comment': /<!--[\w\W]*?-->/, | |
'prolog': /<\?.+?\?>/, | |
'doctype': /<!DOCTYPE.+?>/, | |
'cdata': /<!\[CDATA\[[\w\W]*?]]>/i, | |
'tag': { | |
pattern: /<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/i, | |
inside: { | |
'tag': { | |
pattern: /^<\/?[\w:-]+/i, | |
inside: { | |
'punctuation': /^<\/?/, | |
'namespace': /^[\w-]+?:/ | |
} | |
}, | |
'attr-value': { | |
pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i, | |
inside: { | |
'punctuation': /=|>|"/ | |
} | |
}, | |
'punctuation': /\/?>/, | |
'attr-name': { | |
pattern: /[\w:-]+/, | |
inside: { | |
'namespace': /^[\w-]+?:/ | |
} | |
} | |
} | |
}, | |
'entity': /&#?[\da-z]{1,8};/i | |
}; | |
// 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.css = { | |
'comment': /\/\*[\w\W]*?\*\//, | |
'atrule': { | |
pattern: /@[\w-]+?.*?(;|(?=\s*\{))/i, | |
inside: { | |
'punctuation': /[;:]/ | |
} | |
}, | |
'url': /url\((?:(["'])(\\\n|\\?.)*?\1|.*?)\)/i, | |
'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/, | |
'string': /("|')(\\\n|\\?.)*?\1/, | |
'property': /(\b|\B)[\w-]+(?=\s*:)/i, | |
'important': /\B!important\b/i, | |
'punctuation': /[\{\};:]/, | |
'function': /[-a-z0-9]+(?=\()/i | |
}; | |
if (Prism.languages.markup) { | |
Prism.languages.insertBefore('markup', 'tag', { | |
'style': { | |
pattern: /<style[\w\W]*?>[\w\W]*?<\/style>/i, | |
inside: { | |
'tag': { | |
pattern: /<style[\w\W]*?>|<\/style>/i, | |
inside: Prism.languages.markup.tag.inside | |
}, | |
rest: Prism.languages.css | |
}, | |
alias: 'language-css' | |
} | |
}); | |
Prism.languages.insertBefore('inside', 'attr-value', { | |
'style-attr': { | |
pattern: /\s*style=("|').*?\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); | |
}; | |
Prism.languages.clike = { | |
'comment': [ | |
{ | |
pattern: /(^|[^\\])\/\*[\w\W]*?\*\//, | |
lookbehind: true | |
}, | |
{ | |
pattern: /(^|[^\\:])\/\/.*/, | |
lookbehind: true | |
} | |
], | |
'string': /("|')(\\\n|\\?.)*?\1/, | |
'class-name': { | |
pattern: /((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/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': { | |
pattern: /[a-z0-9_]+\(/i, | |
inside: { | |
punctuation: /\(/ | |
} | |
}, | |
'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/, | |
'operator': /[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|~|\^|%/, | |
'ignore': /&(lt|gt|amp);/i, | |
'punctuation': /[{}[\];(),.:]/ | |
}; | |
; | |
Prism.languages.javascript = Prism.languages.extend('clike', { | |
'keyword': /\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/, | |
'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|-?Infinity)\b/, | |
'function': /(?!\d)[a-z0-9_$]+(?=\()/i | |
}); | |
Prism.languages.insertBefore('javascript', 'keyword', { | |
'regex': { | |
pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/, | |
lookbehind: true | |
} | |
}); | |
if (Prism.languages.markup) { | |
Prism.languages.insertBefore('markup', 'tag', { | |
'script': { | |
pattern: /<script[\w\W]*?>[\w\W]*?<\/script>/i, | |
inside: { | |
'tag': { | |
pattern: /<script[\w\W]*?>|<\/script>/i, | |
inside: Prism.languages.markup.tag.inside | |
}, | |
rest: Prism.languages.javascript | |
}, | |
alias: 'language-javascript' | |
} | |
}); | |
} | |
; | |
/** | |
* Original by Samuel Flores | |
* | |
* Adds the following new token classes: | |
* constant, builtin, variable, symbol, regex | |
*/ | |
Prism.languages.ruby = Prism.languages.extend('clike', { | |
'comment': /#[^\r\n]*(\r?\n|$)/, | |
'keyword': /\b(alias|and|BEGIN|begin|break|case|class|def|define_method|defined|do|each|else|elsif|END|end|ensure|false|for|if|in|module|new|next|nil|not|or|raise|redo|require|rescue|retry|return|self|super|then|throw|true|undef|unless|until|when|while|yield)\b/, | |
'builtin': /\b(Array|Bignum|Binding|Class|Continuation|Dir|Exception|FalseClass|File|Stat|File|Fixnum|Fload|Hash|Integer|IO|MatchData|Method|Module|NilClass|Numeric|Object|Proc|Range|Regexp|String|Struct|TMS|Symbol|ThreadGroup|Thread|Time|TrueClass)\b/, | |
'constant': /\b[A-Z][a-zA-Z_0-9]*[?!]?\b/ | |
}); | |
Prism.languages.insertBefore('ruby', 'keyword', { | |
'regex': { | |
pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/, | |
lookbehind: true | |
}, | |
'variable': /[@$]+\b[a-zA-Z_][a-zA-Z_0-9]*[?!]?\b/, | |
'symbol': /:\b[a-zA-Z_][a-zA-Z_0-9]*[?!]?\b/ | |
}); | |
; | |
(function(){ | |
if (!self.Prism) { | |
return; | |
} | |
var Languages = { | |
'csharp': 'C#', | |
'cpp': 'C++' | |
}; | |
Prism.hooks.add('before-highlight', function(env) { | |
var pre = env.element.parentNode; | |
if (!pre || !/pre/i.test(pre.nodeName)) { | |
return; | |
} | |
var language = Languages[env.language] || env.language; | |
pre.setAttribute('data-language', language); | |
}); | |
})(); | |
; | |
</script> | |
<style> | |
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+ruby&plugins=show-language */ | |
/** | |
* prism.js default theme for JavaScript, CSS and HTML | |
* Based on dabblet (http://dabblet.com) | |
* @author Lea Verou | |
*/ | |
code[class*="language-"], | |
pre[class*="language-"] { | |
color: black; | |
text-shadow: 0 1px white; | |
font-family: Consolas, Monaco, 'Andale Mono', monospace; | |
direction: ltr; | |
text-align: left; | |
white-space: pre; | |
word-spacing: normal; | |
word-break: normal; | |
line-height: 1.5; | |
-moz-tab-size: 4; | |
-o-tab-size: 4; | |
tab-size: 4; | |
-webkit-hyphens: none; | |
-moz-hyphens: none; | |
-ms-hyphens: none; | |
hyphens: none; | |
} | |
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, | |
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { | |
text-shadow: none; | |
background: #b3d4fc; | |
} | |
pre[class*="language-"]::selection, pre[class*="language-"] ::selection, | |
code[class*="language-"]::selection, code[class*="language-"] ::selection { | |
text-shadow: none; | |
background: #b3d4fc; | |
} | |
@media print { | |
code[class*="language-"], | |
pre[class*="language-"] { | |
text-shadow: none; | |
} | |
} | |
/* Code blocks */ | |
pre[class*="language-"] { | |
padding: 1em; | |
margin: .5em 0; | |
overflow: auto; | |
} | |
:not(pre) > code[class*="language-"], | |
pre[class*="language-"] { | |
background: #f5f2f0; | |
} | |
/* Inline code */ | |
:not(pre) > code[class*="language-"] { | |
padding: .1em; | |
border-radius: .3em; | |
} | |
.token.comment, | |
.token.prolog, | |
.token.doctype, | |
.token.cdata { | |
color: slategray; | |
} | |
.token.punctuation { | |
color: #999; | |
} | |
.namespace { | |
opacity: .7; | |
} | |
.token.property, | |
.token.tag, | |
.token.boolean, | |
.token.number, | |
.token.constant, | |
.token.symbol, | |
.token.deleted { | |
color: #905; | |
} | |
.token.selector, | |
.token.attr-name, | |
.token.string, | |
.token.char, | |
.token.builtin, | |
.token.inserted { | |
color: #690; | |
} | |
.token.operator, | |
.token.entity, | |
.token.url, | |
.language-css .token.string, | |
.style .token.string { | |
color: #a67f59; | |
background: hsla(0, 0%, 100%, .5); | |
} | |
.token.atrule, | |
.token.attr-value, | |
.token.keyword { | |
color: #07a; | |
} | |
.token.function { | |
color: #DD4A68; | |
} | |
.token.regex, | |
.token.important, | |
.token.variable { | |
color: #e90; | |
} | |
.token.important, | |
.token.bold { | |
font-weight: bold; | |
} | |
.token.italic { | |
font-style: italic; | |
} | |
.token.entity { | |
cursor: help; | |
} | |
pre[class*='language-'] { | |
position: relative; | |
} | |
pre[class*='language-'][data-language]::before { | |
content: attr(data-language); | |
color: black; | |
background-color: #CFCFCF; | |
display: inline-block; | |
position: absolute; | |
top: 0; | |
right: 0; | |
font-size: 0.9em; | |
border-radius: 0 0 0 5px; | |
padding: 0 0.5em; | |
text-shadow: none; | |
} | |
</style> | |
<script> | |
Backbone.on("set:isComplete",function(){ | |
Prism.highlightAll(); | |
}); | |
Backbone.on("card:save", function(id){ | |
Prism.highlightElement($('#card'+id+' pre code')[0]); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment