Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A CodePen by Bram de Haan.

Colorscheme Lab – with Sass Variables

Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme. When using Base16 Builder as a building tool, you can, like Solarized, make colorschemes that come in a light – and in a dark background version.
The Sass variables that are used here in this 'Colorscheme Lab', are basically the same that are used in the template.erb files by Base16 Builder, so after creating a colorscheme with this lab, converting to many application formats for syntax highlighting comes within reach.

A CodePen by Bram de Haan

<header class="header"><h1><a href="http://codepen.io/atelierbram/pen/JnbIt">Colorscheme Lab <span class="small">&#8211; with Sass variables</span></a></h1>
<h2>code syntax highlighter builder</h2></header>
<div class="cf wrap">
<div class="col code-demo">
<h3>HTML</h3>
<pre class="language-markup"><code class="language-markup">
&lt;!-- main grid section --&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;large-4 columns&quot;&gt;
&lt;div class=&quot;panel&quot;&gt;
&lt;h5&gt;panel title&lt;/h5&gt;
&lt;p&gt;this is a three columns grid panel with an arbitrary height.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;large-6 columns&quot;&gt;
&lt;div class=&quot;panel&quot;&gt;
&lt;h5&gt;panel title&lt;/h5&gt;
&lt;p&gt;this is a six columns grid panel with an arbitrary height. bacon ipsum dolor sit amet salami ham hock biltong ball tip drumstick sirloin pancetta meatball short loin.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;large-3 columns&quot;&gt;
&lt;div class=&quot;panel&quot;&gt;
</code></pre>
<h3>CSS</h3>
<pre class="language-css"><code class="language-css">
/* comment */
@media only screen {
footer {
overflow: hidden;
text-align: center;
text-transform: uppercase;
}
footer ul {
list-style: none;
padding-left: 0;
}
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after { clear: both !important; }
</code></pre>
<h3>Javascript</h3>
<pre class="language-javascript"><code class="language-javascript">
// comment
events : function () {
var self = this;
$(this.scope)
.on(&#39;click.joyride&#39;, &#39;.joyride-next-tip, .joyride-modal-bg&#39;, function (e) {
e.preventDefault();
if (this.settings.$li.next().length &lt; 1) {
this.end();
} else if (this.settings.timer &gt; 0) {
clearTimeout(this.settings.automate);
this.hide();
this.show();
this.startTimer();
} else {
this.hide();
</code></pre>
<h3>SVG</h3>
<pre class="language-markup svg-markup"><code class="language-markup">
&lt;!-- http://www.w3.org/html/logo/downloads/HTML5_Badge.svg --&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;
&lt;title&gt;HTML5 Logo Badge&lt;/title&gt;
&lt;path fill=&quot;#E34F26&quot; d=&quot;M71,460 L30,0 481,0 440,460 255,512&quot;/&gt;
&lt;path fill=&quot;#EF652A&quot; d=&quot;M256,472 L405,431 440,37 256,37&quot;/&gt;
&lt;path fill=&quot;#EBEBEB&quot; d=&quot;M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z&quot;/&gt;
&lt;path fill=&quot;#FFF&quot; d=&quot;M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z&quot;/&gt;
&lt;/svg&gt;
</code></pre>
<h3>About</h3>
<pre class="language-"><code class="language-">
<span class="blue"># Colorscheme Lab</span>
When using <span class="red">[Base16 Builder](</span><span class="green">https://github.com/chriskempson/base16-builder</span><span class="red">)</span> as a building tool, you can, like Solarized, make colorschemes that come in a light, - and in a dark background version.
The Sass variables that are used here in this 'Colorscheme Lab', are basically the same that are used in the template.erb files by Base16 Builder, so after creating a colorscheme with this lab, converting to many application formats for syntax highlighting comes within reach.
<span class="red">* [Atelier Schemes](</span><span class="green">http://atelierbram.github.io/syntax-highlighting/atelier-schemes</span><span class="red">)</span>
<span class="red">* [Base16 Builder](</span><span class="green">https://github.com/chriskempson/base16-builder</span>
<span class="red">* [This page as Gthub Gist](</span><span class="green">https://gist.github.com/atelierbram/6283373</span><span class="red">)</span>
</code></pre>
</div>
<div class="col tiles-demo">
<h3 id="demo-tiles">Sixteen colors</h3>
<div class="sh-c">
<div class="unit base00-background sh-c-light"> base00 </div>
<div class="unit base01-background sh-c-light"> base01 </div>
<div class="unit base02-background"> base02 </div>
<div class="unit base03-background"> base03 </div>
<div class="unit base04-background"> base04 </div>
<div class="unit base05-background"> base05 </div>
<div class="unit base06-background"> base06 </div>
<div class="unit base07-background"> base07 </div>
<div class="unit yellow-background"> yellow </div>
<div class="unit orange-background"> orange </div>
<div class="unit red-background"> red </div>
<div class="unit magenta-background"> magenta </div>
<div class="unit violet-background"> violet </div>
<div class="unit blue-background"> blue </div>
<div class="unit cyan-background"> cyan </div>
<div class="unit green-background"> green </div>
</div>
<h3 id="color-code" class="mtm no-border">Colors in code <small>Scss variables</small></h3>
<pre class="base00-background language-scss"><code class="language-scss sh-c-light">
$base00: <span class="sh-c-comm">hsl(50, 5%, 12%); /* #20201d */</span>
$base01: <span class="base01-background sh-c-comm">hsl(50, 6%, 15%); /* #292824 */</span>
$base02: <span class="base02-background sh-c-comm sh-c-dark">hsl(50, 8%, 40%); /* #6e6b5e */</span>
$base03: <span class="base03-background sh-c-comm sh-c-dark">hsl(50, 9%, 45%); /* #7d7a68 */</span>
$base04: <span class="base04-background sh-c-comm sh-c-dark">hsl(50, 11%, 55%); /* #999580 */</span>
$base05: <span class="base05-background sh-c-comm sh-c-dark">hsl(50, 13%, 60%); /* #a6a28c */</span>
$base06: <span class="base06-background sh-c-comm sh-c-dark">hsl(50, 35%, 86%); /* #e8e4cf */</span>
$base07: <span class="base07-background sh-c-comm sh-c-dark">hsl(50, 87%, 96%); /* #fefbec */</span>
$base08: <span class="base08-background sh-c-comm sh-c-dark">hsl(0, 67%, 53%); /* #d73737 */</span>
$base09: <span class="base09-background sh-c-comm sh-c-dark">hsl(25, 83%, 39%); /* #b65611 */</span>
$base0A: <span class="base0A-background sh-c-comm sh-c-dark">hsl(50, 80%, 45%); /* #cfb017 */</span>
$base0B: <span class="base0B-background sh-c-comm sh-c-dark">hsl(100, 50%, 45%); /* #60ac39 */</span>
$base0C: <span class="base0C-background sh-c-comm sh-c-dark">hsl(162, 70%, 40%); /* #1fad83 */</span>
$base0D: <span class="base0D-background sh-c-comm sh-c-dark">hsl(225, 67%, 64%); /* #6684e1 */</span>
$base0E: <span class="base0E-background sh-c-comm sh-c-dark">hsl(287, 60%, 58%); /* #b854d4 */</span>
$base0F: <span class="base0F-background sh-c-comm sh-c-dark">hsl(349, 65%, 52%); /* #d43552 */</span>
<span class="red-background sh-c-comm sh-c-dark">$red:</span> $base08;
<span class="orange-background sh-c-comm sh-c-dark">$orange:</span> $base09;
<span class="yellow-background sh-c-comm sh-c-dark">$yellow:</span> $base0A;
<span class="green-background sh-c-comm sh-c-dark">$green:</span> $base0B;
<span class="cyan-background sh-c-comm sh-c-dark">$cyan:</span> $base0C;
<span class="blue-background sh-c-comm sh-c-dark">$blue:</span> $base0D;
<span class="violet-background sh-c-comm sh-c-dark">$violet:</span> $base0E;
<span class="magenta-background sh-c-comm sh-c-dark">$magenta:</span> $base0F;
</code></pre>
<pre class="base00-background base05">
<span class="base0E">require</span> <span class="base0B">"gem"</span>
<span class="base08">string</span> = <span class="base0B">"base16"</span>
<span class="base08">symbol</span> = <span class="base0B">:base16</span>
<span class="base08">fixnum</span> = <span class="base09">0</span>
<span class="base08">float</span> = <span class="base09">0.00</span>
<span class="base08">array</span> = <span class="base0A">Array</span>.<span class="base0D">new</span>
<span class="base08">array</span> = [<span class="base0B">'chris'</span>, <span class="base09">85</span>]
<span class="base08">hash</span> = {<span class="base0B">"test"</span> => <span class="base0B">"test"</span>}
<span class="base08">regexp</span> = <span class="base0C">/[abc]/</span>
<span class="base03"># This is a comment</span>
<span class="base0E">class</span> <span class="base0A">Person</span>
<span class="base0D">attr_accessor</span> <span class="base0B">:name</span>
<span class="base0E">def</span> <span class="base0D">initialize</span>(<span class="base08">attributes</span> = {})
<span class="base08">@name</span> = <span class="base08">attributes</span>[<span class="base0B">:name</span>]
<span class="base0E">end</span>
<span class="base0E">def</span> <span class="base0E">self</span>.<span class="base0D">greet</span>
<span class="base02-background"><span class="base0B">"hello"</span></span>
<span class="base0E">end</span>
<span class="base0E">end</span>
<span class="base08">person1</span> = <span class="base0A">Person</span>.<span class="base0D">new</span>(<span class="base0B">:name</span> => <span class="base0B">"Chris"</span>)
<span class="base0D">print</span> <span class="base0A">Person</span>::<span class="base0D">greet</span>, <span class="base0B">" "</span>, <span class="base08">person1</span>.<span class="base0D">name</span>, <span class="base0B">"<span class="base09">\n</span>"</span>
<span class="base0D">puts</span> <span class="base0B">"another </span><span class="base0F">#{</span><span class="base0A">Person</span>::<span class="base0D">greet</span><span class="base0F">}</span> <span class="base0F">#{</span><span class="base08">person1</span>.<span class="base0D">name</span><span class="base0F">}</span><span class="base0B">"</span>
</pre>
<pre class="base07-background base02 border">
<span class="base0E">require</span> <span class="base0B">"rubygems"</span>
<span class="base08">string</span> = <span class="base0B">"tomorrow"</span>
<span class="base08">symbol</span> = <span class="base0B">:tomorrow</span>
<span class="base08">fixnum</span> = <span class="base09">0</span>
<span class="base08">float</span> = <span class="base09">0.00</span>
<span class="base08">array</span> = <span class="base0A">Array</span>.<span class="base0D">new</span>
<span class="base08">array</span> = [<span class="base0B">'chris'</span>, <span class="base09">85</span>]
<span class="base08">hash</span> = {<span class="base0B">"test"</span> => <span class="base0B">"test"</span>}
<span class="base08">regexp</span> = <span class="base0C">/[abc]/</span>
<span class="base03"># This is a comment</span>
<span class="base0E">class</span> <span class="base0A">Person</span>
<span class="base0D">attr_accessor</span> <span class="base0B">:name</span>
<span class="base0E">def</span> <span class="base0D">initialize</span>(<span class="base08">attributes</span> = {})
<span class="base08">@name</span> = <span class="base08">attributes</span>[<span class="base0B">:name</span>]
<span class="base0E">end</span>
<span class="base0E">def</span> <span class="base0E">self</span>.<span class="base0D">greet</span>
<span class="base06-background"><span class="base0B">"hello"</span></span>
<span class="base0E">end</span>
<span class="base0E">end</span>
<span class="base08">person1</span> = <span class="base0A">Person</span>.<span class="base0D">new</span>(<span class="base0B">:name</span> => <span class="base0B">"Chris"</span>)
<span class="base0D">print</span> <span class="base0A">Person</span>::<span class="base0D">greet</span>, <span class="base0B">" "</span>, <span class="base08">person1</span>.<span class="base0D">name</span>, <span class="base0B">"<span class="base09">\n</span>"</span>
<span class="base0D">puts</span> <span class="base0B">"another </span><span class="base0F">#{</span><span class="base0A">Person</span>::<span class="base0D">greet</span><span class="base0F">}</span> <span class="base0F">#{</span><span class="base08">person1</span>.<span class="base0D">name</span><span class="base0F">}</span><span class="base0B">"</span>
</pre>
</div>
</div><!-- \.cf wrap -->
<footer class="footer cf">
<span class="col"><a href="http://atelierbram.github.io/syntax-highlighting/atelier-schemes">Atelier Colorschemes</a> with <a href="https://github.com/chriskempson/base16-builder">Base16</a>
</span>
<span class="col"><a href="http://atelierbram.github.io/syntax-highlighting/prism/">More Colorschemes for Prism</a></span>
</footer>
/* **********************************************
Begin prism-core.js
********************************************** */
/**
* Prism: Lightweight, robust, elegant syntax highlighting
* MIT license http://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou http://lea.verou.me
*/
(function(){
// Private helper vars
var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;
var _ = self.Prism = {
util: {
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.slice();
}
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
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];
}
}
}
ret[token] = grammar[token];
}
}
return root[inside] = ret;
},
// Traverse a language definition with Depth First Search
DFS: function(o, callback) {
for (var i in o) {
callback.call(o, i, o[i]);
if (_.util.type(o) === 'Object') {
_.languages.DFS(o[i], callback);
}
}
}
},
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(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
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) {
return Token.stringify(_.tokenize(text, grammar), 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 pattern = grammar[token],
inside = pattern.inside,
lookbehind = !!pattern.lookbehind,
lookbehindLength = 0;
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);
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) {
this.type = type;
this.content = content;
};
Token.stringify = function(o, language, parent) {
if (typeof o == 'string') {
return o;
}
if (Object.prototype.toString.call(o) == '[object 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';
}
_.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) {
// In worker
self.addEventListener('message', function(evt) {
var message = JSON.parse(evt.data),
lang = message.language,
code = message.code;
self.postMessage(JSON.stringify(_.tokenize(code, _.languages[lang])));
self.close();
}, false);
return;
}
// 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);
}
}
})();
/* **********************************************
Begin prism-markup.js
********************************************** */
Prism.languages.markup = {
'comment': /&lt;!--[\w\W]*?-->/g,
'prolog': /&lt;\?.+?\?>/,
'doctype': /&lt;!DOCTYPE.+?>/,
'cdata': /&lt;!\[CDATA\[[\w\W]*?]]>/i,
'tag': {
pattern: /&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,
inside: {
'tag': {
pattern: /^&lt;\/?[\w:-]+/i,
inside: {
'punctuation': /^&lt;\/?/,
'namespace': /^[\w-]+?:/
}
},
'attr-value': {
pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,
inside: {
'punctuation': /=|>|"/g
}
},
'punctuation': /\/?>/g,
'attr-name': {
pattern: /[\w:-]+/g,
inside: {
'namespace': /^[\w-]+?:/
}
}
}
},
'entity': /&amp;#?[\da-z]{1,8};/gi
};
// 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(/&amp;/, '&');
}
});
/* **********************************************
Begin prism-css.js
********************************************** */
Prism.languages.css = {
'comment': /\/\*[\w\W]*?\*\//g,
'atrule': {
pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi,
inside: {
'punctuation': /[;:]/g
}
},
'url': /url\((["']?).*?\1\)/gi,
'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g,
'property': /(\b|\B)[\w-]+(?=\s*:)/ig,
'string': /("|')(\\?.)*?\1/g,
'important': /\B!important\b/gi,
'ignore': /&(lt|gt|amp);/gi,
'punctuation': /[\{\};:]/g
};
if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
'style': {
pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,
inside: {
'tag': {
pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,
inside: Prism.languages.markup.tag.inside
},
rest: Prism.languages.css
}
}
});
}
/* **********************************************
Begin prism-clike.js
********************************************** */
Prism.languages.clike = {
'comment': {
pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,
lookbehind: true
},
'string': /("|')(\\?.)*?\1/g,
'class-name': {
pattern: /((?:class|interface|extends|implements|trait|instanceof|new)\s+)[a-z0-9_\.\\]+/ig,
lookbehind: true,
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}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,
'ignore': /&(lt|gt|amp);/gi,
'punctuation': /[{}[\];(),.:]/g
};
/* **********************************************
Begin prism-javascript.js
********************************************** */
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: true
}
});
if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
'script': {
pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,
inside: {
'tag': {
pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,
inside: Prism.languages.markup.tag.inside
},
rest: Prism.languages.javascript
}
}
});
}
/* **********************************************
Begin prism-file-highlight.js
********************************************** */
(function(){
if (!self.Prism || !self.document || !document.querySelector) {
return;
}
var Extensions = {
'js': 'javascript',
'html': 'markup',
'svg': 'markup'
};
Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function(pre) {
var src = pre.getAttribute('data-src');
var extension = (src.match(/\.(\w+)$/) || [,''])[1];
var language = Extensions[extension] || extension;
var code = document.createElement('code');
code.className = 'language-' + language;
pre.textContent = '';
code.textContent = 'Loading…';
pre.appendChild(code);
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status < 400 && xhr.responseText) {
code.textContent = xhr.responseText;
Prism.highlightElement(code);
}
else if (xhr.status >= 400) {
code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
}
else {
code.textContent = '✖ Error: File does not exist or is empty';
}
}
};
xhr.send(null);
});
})();
@import "compass";
// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
$base00: hsl(50, 5%, 12%); /* #20201d */
$base01: hsl(50, 6%, 15%); /* #292824 */
$base02: hsl(50, 8%, 40%); /* #6e6b5e */
$base03: hsl(50, 9%, 45%); /* #7d7a68 */
$base04: hsl(50, 11%, 55%); /* #999580 */
$base05: hsl(50, 13%, 60%); /* #a6a28c */
$base06: hsl(50, 35%, 86%); /* #e8e4cf */
$base07: hsl(50, 87%, 96%); /* #fefbec */
$base08: hsl(0, 67%, 53%); /* #d73737*/
$base09: hsl(25, 83%, 39%); /* #b65611 */
$base0A: hsl(50, 80%, 45%); /* #cfb017 */
$base0B: hsl(100, 50%, 45%); /* #60ac39 */
$base0C: hsl(162, 70%, 40%); /* #1fad83 */
$base0D: hsl(225, 67%, 64%); /* #6684e1 */
$base0E: hsl(287, 60%, 58%); /* #b854d4 */
$base0F: hsl(349, 65%, 52%); /* #d43552 */
$red: $base08;
$orange: $base09;
$yellow: $base0A;
$green: $base0B;
$cyan: $base0C;
$blue: $base0D;
$violet: $base0E;
$magenta: $base0F;
$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
$code-font-size: 14px;
$code-line-height: 1.375;
$code-background: $base00;
$code-color: $base05;
$code-color-fade: $base05;
// $code-text-shadow: none;
$code-color-comment: $base02;
$code-color-keyword: $base0B;
$code-color-value: $base0C;
$code-color-attr-name: $base09;
$code-color-string: $base0C;
$code-color-name: $base0A;
$code-color-number: $base09;
$code-color-variable: $base0D;
$code-color-selector: $base0E;
$code-color-property: $base0A;
$code-color-important: $base08;
$code-color-tag: $base0D;
$code-color-atrule: $base0C;
// @import "../partials/prism";
/**
* Prism base code highlighter theme using Sass
*
* @author @MoOx
* https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss
* slightly adapted by me, Bram de Haan
*/
// prism selector
$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
$code-selector-block: "pre[class*=\"language-\"]";
$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
// generic stuff
$code-font-family: Menlo, Monaco, "Courier New", monospace !default;
$code-font-size: 14px !default;
$code-line-height: 1.375 !default;
$code-tab-size: 4 !default;
$code-hyphens: none !default;
$code-block-padding: 12px !default;
$code-inline-padding: 2px 6px !default;
$code-border-radius: 5px !default;
$code-border: 1px solid #e1e1e8 !default;
$code-background: #2a2a2a !default;
$code-color: #fff !default;
$code-color-fade: #bebec5 !default;
// $code-text-shadow: 0 1px 0 #000 !default;
$code-box-shadow: 1px 1px .3em -.1em #000 inset !default;
$code-color-property: #b58900 !default;
$code-color-important: #cb4b16 !default;
$code-color-tag: #268bd2 !default;
$code-color-atrule: #2aa198 !default;
$code-color-attr-name: #b65611 !default;
// $code-linenums-padding: 7px !default;
// $code-linenums-width: 40px !default;
// $code-linenums-background: #444 !default;
// $code-linenums-border-color: #555 !default;
// $code-linenums-border-width: 1px !default;
@if $code-selector != null {
#{$code-selector} {
-moz-tab-size: $code-tab-size;
-o-tab-size: $code-tab-size;
tab-size: $code-tab-size;
-webkit-hyphens: $code-hyphens;
-moz-hyphens: $code-hyphens;
-ms-hyphens: $code-hyphens;
hyphens: $code-hyphens;
// whitespace management
white-space: pre; // fallback
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
font-family: $code-font-family;
font-size: $code-font-size;
line-height: $code-line-height;
color: $code-color;
// text-shadow: $code-text-shadow;
background: $code-background;
}
}
%code-background {
border-radius: $code-border-radius;
border: $code-border;
box-shadow: $code-box-shadow;
}
@if $code-selector-block != null {
#{$code-selector-block} {
@extend %code-background;
padding: $code-block-padding;
}
}
@if $code-selector-inline != null {
#{$code-selector-inline} {
@extend %code-background;
padding: $code-inline-padding;
}
}
// pre[class*="language-"],
// :not(pre) > code[class*="language-"] {
// background: $code-background;
// }
// prism tokens
//
$code-color-comment: null !default;
$code-color-keyword: null !default;
$code-color-value: null !default;
$code-color-string: null !default;
$code-color-name: null !default;
$code-color-number: null !default;
$code-color-variable: null !default;
$code-color-selector: null !default;
$code-color-punctuation: $code-color-fade !default;
#{$code-selector} {
.namespace {
opacity: .7;
}
.token {
&.comment,
&.prolog,
&.doctype,
&.cdata {
color: $code-color-comment;
}
&.null,
&.operator,
&.boolean,
&.number {
color: $code-color-number;
}
&.string {
color: $code-color-string;
}
&.attr-name {
color: $code-color-attr-name;
}
&.entity,
&.url,
.language-css &.string,
.style &.string {
color: $code-color-string;
}
&.selector {
color: $code-color-selector;
}
&.attr-value,
&.keyword,
&.control,
&.directive,
&.unit {
color: $code-color-keyword;
}
&.important {
color: $code-color-important;
}
&.atrule{
color: $code-color-atrule;
}
&.regex,
&.statement {
color: $code-color-value;
}
&.placeholder,
&.variable {
color: $code-color-variable;
}
&.property,
&.tag {
// font-style: italic;
}
&.property {
color: $code-color-property;
}
&.tag {
color: $code-color-tag;
}
&.important,
&.statement {
font-weight: bold;
}
// todo ?
// &.mixin
// &.gradient
// &.abslength
// &.easing
// &.time
// &.angle
// &.fontfamily
// ruby/vim https://github.com/LeaVerou/prism/pull/18
// &.inst-var
// &.builtin
// &.const
// &.symbol
//
// php https://github.com/LeaVerou/prism/pull/20
// &.deliminator
// &.function
&.punctuation {
color: $code-color-punctuation;
}
&.entity {
cursor: help;
}
// for dev :)
&.debug { color: red }
}
}
// generic demo styles
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
background-color: $base07;
}
body,
.header h1 .small {
font: normal 100%/1.375 AvenirNext-Regular, Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
.header,
.footer {
padding: .5em 0;
background: darken($magenta,10);
color: $base07;
width: 100%;
text-align: center;
@include text-shadow (darken($magenta,25) 1px 1px 1px);
}
.header {
// border-bottom: 2px solid darken($magenta,10);
border-bottom: 2px solid $blue;
}
.footer {
border-top: 2px solid $blue;
padding-bottom: 2em;
}
.header a,
.footer a {
color: lighten($yellow,25);
text-decoration: none;
}
h1, h3 {
font-family: AvenirNextCondensed-Demibold, Corbel, "Lucida Grande", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
h1 {
font-size: 1.5em;
text-transform: uppercase;
letter-spacing: 3px;
}
h2 {
font-size: 1.125em;
text-transform: capitalize;
font-weight: normal;
letter-spacing: 1px;
}
.header h1 .small {
font-size: 0.75em;
text-transform: none;
letter-spacing: 1px;
color: $base06;
}
.base00-background { background-color: $base00; }
.base01-background { background-color: $base01; }
.base02-background { background-color: $base02; }
.base03-background { background-color: $base03; }
.base04-background { background-color: $base04; }
.base05-background { background-color: $base05; }
.base06-background { background-color: $base06; }
.base07-background { background-color: $base07; }
.base08-background,
.red-background { background-color: $red; }
.base09-background,
.orange-background { background-color: $orange; }
.base0A-background,
.yellow-background { background-color: $yellow; }
.base0B-background,
.green-background { background-color: $green; }
.base0C-background,
.cyan-background { background-color: $cyan; }
.base0D-background,
.blue-background { background-color: $blue; }
.base0E-background,
.violet-background { background-color: $violet; }
.base0F-background,
.magenta-background { background-color: $magenta; }
.base00 { color: $base00; }
.base01 { color: $base01; }
.base02 { color: $base02; }
.base03 { color: $base03; }
.base04 { color: $base04; }
.base05 { color: $base05; }
.base06 { color: $base06; }
.base07 { color: $base07; }
.base08,
.red { color: $red; }
.base09,
.orange { color: $orange; }
.base0A,
.yellow { color: $yellow; }
.base0B,
.green { color: $green; }
.base0C,
.cyan { color: $cyan; }
.base0D,
.blue { color: $blue; }
.base0E,
.violet { color: $violet; }
.base0F,
.magenta { color: $magenta; }
pre[class*="language"].base00-background {
background-color: $base00;
}
.sh-c {
overflow: auto;
color: #1b1918 !important;
}
.sh-c-comm {
padding: .2em .5em;
display: inline-block;
}
.sh-c-light,
.sh-c-light .comment {
color: #a8a19f !important;
}
.sh-c-dark,
.sh-c-dark .comment {
color: #1b1918 !important;
}
pre[class^="base"] {
padding: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
margin: .5em 0;
}
.wrap {
margin-top: 1em;
padding: 0 2em;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after,
.clear {
clear: both;
}
.col {
float: left;
}
.code-demo {
padding-right: 1em;
}
.tiles-demo {
padding-left: 1em;
}
.unit {
float: left;
width: 25%;
padding: 4em 0;
text-align: center;
}
h3 {
margin: 1em 0 0 0.75em;
}
/*
.token a {
color: $yellow;
}
*/
.border {
border: 1px solid $base05;
}
@media only screen and (min-width:750px) {
.col {
width: 50%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment