This is a simple R syntax highlighter for PrismJS.
View it on bl.ocks.org to see a demonstration (I have linked the raw page as the default bl.ocks.org rendering appears to cut the article short).
I have additionally made up a couple of themes to try out on the R:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta http-equiv="Content-Style-Type" content="text/css" /> | |
| <meta name="generator" content="pandoc" /> | |
| <title>Prism Syntax Highlighter for R</title> | |
| <style type="text/css">code{white-space: pre;}</style> | |
| <link rel='stylesheet' href='page.css' /> | |
| <!-- style for prism.js (you may wish to combine the two) --> | |
| <link id="theme-stylesheet" rel='stylesheet' href='prism.okaidia.css' /> | |
| <link id="theme-stylesheet" rel='stylesheet' href='prism.r.css' /> | |
| </head> | |
| <body> | |
| <header> | |
| <h1 id="prism-syntax-highlighting-in-r">Prism syntax highlighting in R</h1> | |
| </header> | |
| <div id="tabs"> | |
| <ul> | |
| <li class="selected"><a id="okaidia" href="javascript://" onclick="setTheme(this)">Okaidia</a></li> | |
| <li><a id="tomorrownight80s" href="javascript://" onclick="setTheme(this)">Tomorrow Night 80s</a></li> | |
| <li><a id="zenburn" href="javascript://" onclick="setTheme(this)">Zenburn</a></li> | |
| </ul> | |
| </div> | |
| <div class="content"> | |
| <p>This is a test of <a href="http://prismjs.com/">Prism syntax highlighting</a> for <a href="http://www.r-project.org/">R</a>.</p> | |
| <p>You need to include <a href="prism.r.js">prism.r.js</a> into your site, and also define CSS classes <code>.token.function</code>, <code>.token.variable</code> and (optionally) <code>.token.namespace</code>.</p> | |
| <p>This is in addition to your chosen prism.min.js and stylesheet you download from the <a href="http://prismjs.com/download">PrismJS website</a>. (You may wish to minify prism.r.js and combine it into prism.min.js).</p> | |
| <pre class="language-markup"><code><script src="prism.min.js" type="text/javascript"></script> | |
| <script src="prism.r.js" type="text/javascript"></script></code></pre> | |
| <pre class="language-css"><code>.token.function { ... } | |
| .token.variable { ... } | |
| .token.namespace { ... }</code></pre> | |
| <p>The <a href="prism.tomorrownight80s.css">CSS sheet used for this page</a> is based off Chris Kempson's <a href="https://github.com/chriskempson/tomorrow-theme">Tomorrow Night 80s palette</a>, matching the one of the same name used by RStudio.</p> | |
| <h1 id="example">Example</h1> | |
| <p>If you add the "language-r" class to inline code it will also be marked up: <code class="language-r">x <- 1 + 2</code>. | |
| The following is some block R code.</p> | |
| <pre class="language-r"><code># This is a comment. | |
| like <- function (times=1, like=T, ...) { | |
| str <- 'I do not like green eggs and ham!' | |
| if (like) str <- gsub('do not ', '', str) | |
| for (i in 1:10) { | |
| print(str) | |
| } | |
| return(paste(...)) | |
| } | |
| x <- "Here is a | |
| quite long | |
| multiline \t \" | |
| string with ' embedded. | |
| " | |
| x <- c( | |
| 1e2 + 2i * 10, | |
| NA, | |
| NULL, | |
| Inf, | |
| NA_character_, | |
| TRUE, | |
| FALSE | |
| ) | |
| y@slot | |
| list(a=1)$a[1] | |
| ?table | |
| knitr::knit</code></pre> | |
| <h1 id="themes">Themes</h1> | |
| <p> | |
| Use the tab bar up top to switch between themes. | |
| The themes shown here are: | |
| </p> | |
| <ul> | |
| <li><a href="prism.okaidia.css">Okaidia</a>, the same as the one <a href="http://prismjs.com/index.html?theme=prism-okaidia#examples">provided with Prism</a> but with the added CSS classes <code>.token.{variable, namespace, function}</code>; | |
| <li><a href="prism.zenburn.css">Zenburn</a>, based off <a href="http://slinky.imukuppi.org/zenburnpage/">Jani Nurminen's vim theme</a> of the same name; and</li> | |
| <li><a href="prism.tomorrownight80s.css">Tomorrow Night 80s</a>, based off Chris Kempson's <a href="https://github.com/chriskempson/tomorrow-theme">Tomorrow Night 80s palette</a>, matching the one of the same name used by RStudio.</li> | |
| </ul> | |
| <h1 id="known-issue">Known Issue</h1> | |
| <p>Hash characters (i.e. the symbol that you use to comment) within strings screw up highlighting. This is a typical problem of any regex-based syntax highlighter and is <a href="http://prismjs.com/examples.html#failures">known by Prism</a>.</p> | |
| <pre class="language-r"><code> | |
| x <- "Here is a string with a # inside." | |
| </code></pre> | |
| <p>There are a few workarounds you will try, though as with all regex-based solutions there will be cases where it doesn't work. Pick what suits you best.</p> | |
| <p>If you like, you can swap the order of the 'comment' and 'string' lines in <a href="prism.r.js">prism.r.js</a> which will cause strings to take priority over comments. | |
| However, this means that if you have a comment with a string in it, it will fail.</p> | |
| <!-- Note: if you're viewing the source, ignore these next few pre/code with hard-coded syntax highlighting, that's to demonstrate the bug. --> | |
| <pre class="language-"><code class="language-"> | |
| <span class="token variable">x</span> <span class="token operator"><-</span> <span class="token string">"Here is a string with a # inside."</span> <span class="token comment" spellcheck="true"># and here is a comment with </span><span class="token string">"quotes"</span> <span class="token keyword">in</span> <span class="token variable">it</span> | |
| </code></pre> | |
| <p>Alternatively, you can change the 'comment' regex to this:</p> | |
| <!-- Note: hard-coded syntax highlighting here because of the similar bug I'm trying to explain. Strings withing regexes. --> | |
| <pre class=" language-"><code class=" language-"> | |
| Prism<span class="token punctuation">.</span>languages<span class="token punctuation">.</span>r <span class="token operator">=</span> <span class="token punctuation">{</span> | |
| </span> <span class="token string">'comment'</span><span class="token punctuation">:</span> <span class="token regex">/#(?=(?:[^"\\\r\n]*(\\.|"(?:[^"\\\r\n]*\\.)*[^"\\\r\n]*"))*[^"\r\n]*$).*$/gm</span><span class="token punctuation">,</span> | |
| <span class="token comment" spellcheck="true"> // ... the rest | |
| </span></code></pre> | |
| <p>This means that a hash tag within double quotes will not be highlighted. Also, if a comment has <b>balanced</b> double quotes in it it will be highlighted properly as a comment. | |
| However, if a comment has <b>unbalanced</b> double quotes in it (i.e. an odd number), that comment will <b>not</b> be highlighted properly. | |
| Also, if your string is surrounded by single quotes (not double) and has a hash tag in it, you will suffer from the original problem. (If you modify the regex above to allow hash tags within single quotes, you will have to be careful never to have unbalanced single quotes (i.e. apostrophes!) in your comments or else the comments won't be highlighted. Words with apostrophes are so common that this is a Bad Idea).</p> | |
| <p>Again, regex highlighters always have these problems. If you think you never have an unbalanced double quote in a comment this could be a feasible solution, but pick according to your usage.</p> | |
| <pre class=" language-"><code class=" language-"> | |
| <span class="token variable">x</span> <span class="token operator"><-</span> <span class="token string">"Here is a string with a # inside."</span> <span class="token comment" spellcheck="true"># and here is a comment with "quotes" in it</span> | |
| <span class="token string">"multiline string with | |
| a hash tag # inside it"</span> | |
| # <span class="token variable">comment</span> <span class="token variable">with</span> <span class="token variable">unbalanced</span> <span class="token variable">quote</span> <span class="token variable">mark</span><span class="token punctuation">:</span> " <span class="token variable">inside</span><span class="token punctuation">.</span> <span class="token variable">Won</span>'<span class="token variable">t</span> <span class="token variable">highlight</span><span class="token punctuation">.</span> | |
| </code></pre> | |
| <h1 id="bugs-suggestions-and-improvements">Bugs, Suggestions and Improvements</h1> | |
| <p><script type="text/javascript"> | |
| <!-- | |
| h='gmail.com';a='@';n='mathematical.coffee';e=n+a+h; | |
| document.write('<a h'+'ref'+'="ma'+'ilto'+':'+e+'">'+'Let me know about them!'+'<\/'+'a'+'>'); | |
| // --> | |
| </script><noscript>Let me know about them! (mathematical.coffee at gmail dot com)</noscript></p> | |
| </div> | |
| <!-- including the prism JS files (you may wish to combine prism.min.js & prism.r.js and minify both) --> | |
| <script src="prism.min.js"></script> | |
| <script src="prism.r.js"></script> | |
| <script type="text/javascript"> | |
| var last = document.getElementsByClassName('selected')[0]; | |
| function setTheme(node) { | |
| document.getElementById('theme-stylesheet').href = 'prism.' + node.id + '.css'; | |
| last.className = last.className.replace(/ ?\bselected\b/, ''); | |
| last = node.parentNode; | |
| last.className = last.className + ' selected'; | |
| } | |
| setTheme(last.firstChild); | |
| </script> | |
| </body> | |
| </html> |
| /* style sort of matching my blogger page */ | |
| body, | |
| #tabs li { | |
| font: normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif; | |
| } | |
| body { | |
| background-color: #2d3037; | |
| } | |
| .content { | |
| background-color: white; | |
| border: 1px solid #8ce1f5; | |
| -moz-border-radius: 10px; | |
| -webkit-border-radius: 10px; | |
| -goog-ms-border-radius: 10px; | |
| border-radius: 10px; | |
| line-height: 1.4; | |
| padding: 15px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 70%; | |
| margin-top: 20px; | |
| } | |
| a:link { | |
| color: #29aae1; | |
| text-decoration: none; | |
| } | |
| a:visited { | |
| color: #01689c; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #01689c; | |
| text-decoration: underline; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| color: #29aae1; | |
| font: normal bold 24px Arial, Tahoma, Helvetica, FreeSans, sans-serif; | |
| text-shadow: none; | |
| } | |
| header h1 { | |
| color: #8ce1f5; | |
| font: normal normal 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif; | |
| margin-left: auto; | |
| margin-right: auto; | |
| text-shadow: 0 0 20px #000000; | |
| width: 70%; | |
| text-align: center; | |
| } | |
| #tabs { | |
| display: block; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 0px; | |
| background-color: #29aae1; | |
| background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); | |
| background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); | |
| background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); | |
| background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); | |
| background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); | |
| color: #ffffff; | |
| margin-bottom: 1em; | |
| } | |
| #tabs ul { | |
| list-style: none; | |
| line-height: 1.2; | |
| } | |
| #tabs li { | |
| display: inline; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #tabs a { | |
| color: #ffffff; | |
| text-decoration: none; | |
| display: inline-block; | |
| padding: .6em 1.5em; | |
| margin: 0px; | |
| border-right: 1px solid #2d3037; | |
| } | |
| #tabs li:first-child a { | |
| border-left: 1px solid #2d3037; | |
| } | |
| #tabs .selected a { | |
| background-color: #01689c; | |
| background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); | |
| background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); | |
| background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); | |
| background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); | |
| background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); | |
| } |
| /** | |
| * Prism: Lightweight, robust, elegant syntax highlighting | |
| * MIT license http://www.opensource.org/licenses/mit-license.php/ | |
| * @author Lea Verou http://lea.verou.me | |
| */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){return n.stringify(t.tokenize(e,r),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind||0;a=a.pattern||a;for(var c=0;c<s.length;c++){var h=s[c];if(s.length>e.length)break e;if(h instanceof i)continue;a.lastIndex=0;var p=a.exec(h);if(p){l&&(l=p[1].length);var d=p.index-1+l,p=p[0].slice(l),v=p.length,m=d+v,g=h.slice(0,d+1),y=h.slice(m+1),b=[c,1];g&&b.push(g);var w=new i(u,f?t.tokenize(p,f):p);b.push(w);y&&b.push(y);Array.prototype.splice.apply(s,b)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();; | |
| Prism.languages.markup={comment:/<!--[\w\W]*?--(>|>)/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]+?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; | |
| Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:/@[\w-]+?(\s+[^;{]+)?(?=\s*{|\s*;)/gi,url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,property:/(\b|\B)[a-z-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; | |
| Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:class|interface|extends|implements|trait|instanceof|new)\s+)[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; | |
| Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});; | |
| Prism.languages.bash=Prism.languages.extend("clike",{comment:{pattern:/(^|[^"{\\])(#.*?(\r?\n|$))/g,lookbehind:!0},string:{pattern:/("|')(\\?[\s\S])*?\1/g,inside:{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^\}]+\})/g}},keyword:/\b(if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)\b/g});Prism.languages.insertBefore("bash","keyword",{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^}]+\})/g});Prism.languages.insertBefore("bash","comment",{important:/(^#!\s*\/bin\/bash)|(^#!\s*\/bin\/sh)/g}); | |
| ; |
| /** | |
| * okaidia theme for JavaScript, CSS and HTML | |
| * Loosely based on Monokai textmate theme by http://www.monokai.nl/ | |
| * @author ocodia | |
| */ | |
| code[class*="language-"], | |
| pre[class*="language-"] { | |
| color: #f8f8f2; | |
| text-shadow: 0 1px rgba(0,0,0,0.3); | |
| font-family: Consolas, Monaco, 'Andale Mono', monospace; | |
| direction: ltr; | |
| text-align: left; | |
| white-space: pre; | |
| word-spacing: normal; | |
| word-break: normal; | |
| -moz-tab-size: 4; | |
| -o-tab-size: 4; | |
| tab-size: 4; | |
| -webkit-hyphens: none; | |
| -moz-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| } | |
| /* Code blocks */ | |
| pre[class*="language-"] { | |
| padding: 1em; | |
| margin: .5em 0; | |
| overflow: auto; | |
| border-radius: 0.3em; | |
| } | |
| :not(pre) > code[class*="language-"], | |
| pre[class*="language-"] { | |
| background: #272822; | |
| } | |
| /* Inline code */ | |
| :not(pre) > code[class*="language-"] { | |
| padding: .1em; | |
| border-radius: .3em; | |
| } | |
| .token.comment, | |
| .token.prolog, | |
| .token.doctype, | |
| .token.cdata { | |
| color: slategray; | |
| } | |
| .namespace { | |
| opacity: .7; | |
| } | |
| .token.property, | |
| .token.tag { | |
| color: #f92672; | |
| } | |
| .token.boolean, | |
| .token.number{ | |
| color: #ae81ff; | |
| } | |
| .token.selector, | |
| .token.attr-name, | |
| .token.string { | |
| color: #a6e22e; | |
| } | |
| .token.variable, | |
| .token.punctuation, | |
| .token.operator, | |
| .token.entity, | |
| .token.url, | |
| .language-css .token.string, | |
| .style .token.string { | |
| color: #f8f8f2; | |
| } | |
| .token.atrule, | |
| .token.attr-value | |
| { | |
| color: #e6db74; | |
| } | |
| .token.namespace, | |
| .token.function, | |
| .token.keyword{ | |
| color: #66d9ef; | |
| } | |
| .token.regex, | |
| .token.important { | |
| color: #fd971f; | |
| } | |
| .token.important { | |
| font-weight: bold; | |
| } | |
| .token.entity { | |
| cursor: help; | |
| } |
| /* If you like, you can use the pre-defined CSS stylesheets from Prism.js and simply add styles for the following classes: */ | |
| .token.function { | |
| color: #66d9ef; | |
| } | |
| .token.namespace { | |
| color: #66d9ef; | |
| } | |
| .token.variable { | |
| color: #f8f8f2; | |
| } |
| /** Amy Chan | |
| * You may wish to copy the contents of this into your prism.min.js and minify it. | |
| * 27-05-2013: creation. | |
| * New tokens you need to define in CSS: .token.(slot|namespace|function|variable) | |
| * From `?Quotes`: | |
| * Identifiers consist of a sequence of letters, digits, the period | |
| * (‘.’) and the underscore. They must not start with a digit nor | |
| * underscore, nor with a period followed by a digit. Reserved words | |
| * are not valid identifiers. | |
| * 13-12-2013: modified. | |
| * Fixed bug where namespaces wouldn't highlight. | |
| * Included partial workaround for comments-within-strings bug (commented out | |
| * by default). | |
| */ | |
| Prism.languages.r = { | |
| 'comment': /#.*$/gm, | |
| // if you want to have a partial workaround for the comments-within-strings bug, use the below instead of the above. | |
| // However a comment with an odd number of " in it will not highlight. | |
| //'comment': /#(?=(?:[^"\\\r\n]*(\\.|"(?:[^"\\\r\n]*\\.)*[^"\\\r\n]*"))*[^"\r\n]*$).*$/gm, | |
| 'string': /("|')(?:\\.|(?!\\|\1)[\s\S])*\1/g, | |
| 'keyword': /\b(?:if|else|repeat|while|function|for|in|next|break)\b/g, | |
| // NULL etc are not really booleans but I just group them tohere to be marked up | |
| 'boolean': /\b(?:TRUE|FALSE|T|F|NA(?:_(?:integer|real|complex|character)_)?|NULL)\b/g, | |
| 'function': /(?:(?:[a-zA-Z]|\.(?![0-9]))[.\w]*|`[^`\s]*`)[ \t]*(?=\()/g, | |
| 'number': /\b[-+]?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?i?|Inf|NaN)\b/g, | |
| 'operator': /(?:<|<)-|[-+\/!\^]|={1,2}|(?:&[lg]t;|[><])=?|(&|&){1,2}|\|\|?|\*\*?|\%(\/|in)?\%/g, | |
| 'property': { | |
| pattern: /([$@])[\w._]+/g, | |
| lookbehind: true | |
| }, | |
| 'namespace': /[\w._]+(?=::)/g, | |
| 'punctuation': /[@?${}[\];(),.:]/g, // Prism.Languages.clike.punctuation | |
| 'variable': /(?:(?:[a-zA-Z]|\.(?![0-9]))[.\w]*|`[^`\s]*`)/g | |
| }; |
| /** | |
| * Tomorrow Night 80's theme. for JavaScript, CSS, R and HTML | |
| * Based on the Tomorrow Night 80s theme by ChrisKempson used in RStudio | |
| * https://github.com/chriskempson/tomorrow-theme | |
| * | |
| * @author <[email protected]> | |
| */ | |
| code[class*="language-"], | |
| pre[class*="language-"] { | |
| color: #cccccc; | |
| text-shadow: 0 1px rgba(0,0,0,0.3); | |
| font-family: Consolas, Monaco, 'Andale Mono', monospace; | |
| direction: ltr; | |
| text-align: left; | |
| white-space: pre; | |
| word-spacing: normal; | |
| word-break: normal; | |
| -moz-tab-size: 4; | |
| -o-tab-size: 4; | |
| tab-size: 4; | |
| -webkit-hyphens: none; | |
| -moz-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| } | |
| code[class*="language-"]::selection, | |
| pre[class*="language-"]::selection, | |
| code[class*="language-"] *::selection, | |
| pre[class*="language-"] *::selection { | |
| background: #515151; | |
| } | |
| /* Code blocks */ | |
| pre[class*="language-"] { | |
| padding: 1em; | |
| margin: .5em 0; | |
| overflow: auto; | |
| border-radius: 0.3em; | |
| } | |
| :not(pre) > code[class*="language-"], | |
| pre[class*="language-"] { | |
| background: #2d2d2d; | |
| } | |
| /* Inline code */ | |
| :not(pre) > code[class*="language-"] { | |
| padding: .1em; | |
| border-radius: .3em; | |
| } | |
| .token.comment, | |
| .token.prolog, | |
| .token.doctype, | |
| .token.cdata { | |
| color: #999999; | |
| font-style: italic; | |
| } | |
| .token.operator, | |
| .token.punctuation { | |
| color: #66cccc; | |
| } | |
| .namespace { | |
| opacity: .7; | |
| } | |
| .token.keyword, | |
| .token.selector, | |
| .token.tag { | |
| color: #cc99cc; | |
| } | |
| .token.number, | |
| .token.boolean { | |
| color: #f99157; | |
| } | |
| .token.property, | |
| .token.attr-name, | |
| .token.regex, | |
| .token.function { | |
| color: #ffcc66; | |
| } | |
| .token.atrule, | |
| .token.attr-value, | |
| .token.string { | |
| color: #99cc99; | |
| } | |
| .token.entity, | |
| .token.url, | |
| .language-css .token.string, | |
| .style .token.string { | |
| color: #6699cc; | |
| } | |
| .token.important { | |
| color: #f2777a; | |
| font-weight: bold; | |
| } | |
| .token.entity { | |
| cursor: help; | |
| } | |
| .token.namespace, | |
| .token.variable { | |
| color: #cccccc; | |
| } |
| /** | |
| * ZenBurn theme. for JavaScript, CSS, R and HTML | |
| * Based on the Zenburn theme, http://slinky.imukuppi.org/zenburnpage/ | |
| * @author <[email protected]> | |
| */ | |
| code[class*="language-"], | |
| pre[class*="language-"] { | |
| color: #dcdccc; | |
| text-shadow: 0 1px rgba(0,0,0,0.3); | |
| font-family: Consolas, Monaco, 'Andale Mono', monospace; | |
| direction: ltr; | |
| text-align: left; | |
| white-space: pre; | |
| word-spacing: normal; | |
| word-break: normal; | |
| -moz-tab-size: 4; | |
| -o-tab-size: 4; | |
| tab-size: 4; | |
| -webkit-hyphens: none; | |
| -moz-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| } | |
| code[class*="language-"]::selection, | |
| pre[class*="language-"]::selection, | |
| code[class*="language-"] *::selection, | |
| pre[class*="language-"] *::selection { | |
| background: #555555; | |
| } | |
| /* Code blocks */ | |
| pre[class*="language-"] { | |
| padding: 1em; | |
| margin: .5em 0; | |
| overflow: auto; | |
| border-radius: 0.3em; | |
| } | |
| :not(pre) > code[class*="language-"], | |
| pre[class*="language-"] { | |
| background: #3f3f3f; | |
| } | |
| /* Inline code */ | |
| :not(pre) > code[class*="language-"] { | |
| padding: .1em; | |
| border-radius: .3em; | |
| } | |
| .token.comment, | |
| .token.prolog, | |
| .token.doctype, | |
| .token.cdata { | |
| color: #7f9f7f; | |
| font-style: italic; | |
| } | |
| .namespace { | |
| opacity: .7; | |
| } | |
| .token.property, | |
| .token.tag { | |
| color: #e89393; | |
| } | |
| .token.boolean, | |
| .token.number { | |
| color: #dca3a3; | |
| } | |
| .token.selector, | |
| .token.attr-name, | |
| .token.string { | |
| color: #99cc99; | |
| } | |
| .token.operator, | |
| .token.punctuation, | |
| .token.entity, | |
| .token.url, | |
| .language-css .token.string, | |
| .style .token.string { | |
| color: #8cd0d3; | |
| } | |
| .token.keyword{ | |
| color: #f0dcaf; | |
| font-weight: bold; | |
| } | |
| .token.variable { | |
| color: #dcdccc; | |
| } | |
| .token.atrule, | |
| .token.attr-value, | |
| .token.regex, | |
| .token.function, | |
| .token.namespace, | |
| .token.important { | |
| color: #f0f08c; | |
| } | |
| .token.important, | |
| .token.function { | |
| font-weight: bold; | |
| } | |
| .token.entity { | |
| cursor: help; | |
| } |
Hello, it's lovely work you've done here.
I want to use this but I'm not familiar with CSS and javascript. Would you be able to provide any instructions for how to incorporate this language-r into the Lector theme I'm using for my Ghost blog, which already makes use of prism.js ?
https://creativemarket.com/temacotta/16399-Lector
Thanks!