syntax-highlighting
Version:
Syntax Highlighting Colorschemes for many applications
21 lines (20 loc) • 35.5 kB
HTML
<html lang="en" class="no-js no-flexbox core wf-inactive"><head><meta charset="utf-8"><title>Syntax Highlighting</title><style><br />
<font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: include(../../inc/critical-min-css.inc): failed to open stream: No such file or directory in /Users/bram/Sites/github.com/atelierbram/syntax-highlighting/src/atelier-schemes/index.php on line <i>14</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0287</td><td bgcolor='#eeeeec' align='right'>383600</td><td bgcolor='#eeeeec'>{main}( )</td><td title='/Users/bram/Sites/github.com/atelierbram/syntax-highlighting/src/atelier-schemes/index.php' bgcolor='#eeeeec'>.../index.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: include(): Failed opening '../../inc/critical-min-css.inc' for inclusion (include_path='.:/usr/local/php5/lib/php') in /Users/bram/Sites/github.com/atelierbram/syntax-highlighting/src/atelier-schemes/index.php on line <i>14</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0287</td><td bgcolor='#eeeeec' align='right'>383600</td><td bgcolor='#eeeeec'>{main}( )</td><td title='/Users/bram/Sites/github.com/atelierbram/syntax-highlighting/src/atelier-schemes/index.php' bgcolor='#eeeeec'>.../index.php<b>:</b>0</td></tr>
</table></font></style><html lang="en"><meta charset="utf-8"><title>Syntax highlighting; colorschemes for syntax highlighting</title><link rel="preload" href="http://atelierbram.github.io/syntax-highlighting/assets/css/style-redesign-v1.css" as="style" onload="this.rel='stylesheet'"><noscript><link rel="stylesheet" href="http://atelierbram.github.io/syntax-highlighting/assets/css/style-redesign-v1.css"></noscript><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="author" content="Bram de Haan"><meta name="description" content="Collection of colorschemes for Code Syntax highlighting"><link rel="author" href="https://plus.google.com/+BramdeHaan/posts"><script>function featureDetect(){"use strict";document.documentElement.className=document.documentElement.className.replace(/\bno-js\b/g,"")+" js ","querySelector"in document&&"addEventListener"in window&&Array.prototype.forEach&&(document.documentElement.className=document.documentElement.className.replace(/\bcore\b/g,"")+" enhanced ");var a=document.body||document.documentElement,a=a.style;(""==a.webkitFlexWrap||""==a.msFlexWrap||""==a.flexWrap)&&(document.documentElement.className=document.documentElement.className.replace(/\bno-flexbox\b/g,"")+" flexbox ")}featureDetect();</script></head><body class="page-atelier-schemes type-landingpage"><svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="visuallyhidden"><symbol id="NewTheme" viewBox="0 0 80 50"><g transform="rotate(8 32 32)"><g><rect x="38" fill="#c55000" width="3" height="6"/><rect x="38" y="44" fill="#c55000" width="3" height="6"/><rect x="74" y="22" fill="#c55000" width="6" height="3"/><rect y="22" fill="#c55000" width="6" height="3"/><rect x="64.713" y="3.808" transform="matrix(-0.53 -0.848 0.848 -0.53 95.5307 66.5651)" fill="#c55000" width="3" height="6"/><rect x="11.286" y="37.192" transform="matrix(-0.5298 -0.8481 0.8481 -0.5298 -14.5262 72.3317)" fill="#c55000" width="3" height="6"/><rect x="11.286" y="3.808" transform="matrix(0.5298 -0.8481 0.8481 0.5298 0.2381 14.0448)" fill="#c55000" width="3" height="6"/><rect x="64.712" y="37.192" transform="matrix(0.5298 -0.8481 0.8481 0.5298 -2.956 75.0528)" fill="#c55000" width="3" height="6"/></g><g><path fill="#b30" d="M30,30l-3.5-8v8H24V18h3l3.5,8v-8H33v12H30z"/><path fill="#b30" d="M37.5,19.999V23H41v2h-3.5v3h4.682v2H35V18h7v1.999H37.5z"/><path fill="#b30" d="M52,30l-1.75-9l-1.75,9h-3L43,18h2.606L47,27l2-9h2.5l2,9l1.5-9h2.5l-2,12H52z"/></g></g></symbol><symbol id="logoAvatar" viewBox="0 0 90 90"><rect fill="#2A2A28" width="90" height="90"/><rect x="14" y="25" fill="#FFFFFF" width="63" height="47"/><path fill="#E2D112" d="M41.435,3.348h10.781L66.69,84.196H54.523l-1.385-9.854H38.202l-1.849,9.854H24.187L41.435,3.348z M39.74,65.102h11.858l-5.082-36.036L39.74,65.102z"/></symbol></svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" class="visuallyhidden"><defs><linearGradient id="svgGradient1" gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="452" y2="24"><stop offset="0%" style="stop-color: #ccb833"/><stop offset="50%" style="stop-color: #d77842"/><stop offset="100%" style="stop-color: #e05952"/></linearGradient><linearGradient id="svgGradient2" gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="252" y2="24"><stop offset="0%" style="stop-color: #e05952"/><stop offset="50%" style="stop-color: #6b6bc7"/><stop offset="100%" style="stop-color: #3391cc"/></linearGradient></defs><pattern id="patternGradient1" patternUnits="userSpaceOnUse" viewBox="0 0 452 96" width="452" height="96"><rect width="452" height="96" fill="url(#svgGradient1)"/></pattern><pattern id="patternGradient2" patternUnits="userSpaceOnUse" viewBox="0 0 252 96" width="252" height="96"><rect width="252" height="96" fill="url(#svgGradient2)"/></pattern><symbol id="syntax"><text id="textSyntax" x="245" y="48" style="font-family='Brando, Verdana'; font-size: 48px" text-anchor="middle" fill="url(#patternGradient1)">Syntax Highlighting</text></symbol><symbol id="colorschemes"><text id="textColorschemes" x="126" y="48" style="font-family:'brandosans-semibold-v100', Verdana; font-size:33px;text-transform:uppercase" text-anchor="middle" fill="url(#patternGradient2)">Colorschemes</text></symbol></svg><header class="row header" id="header"><h1 class="repo-title"><a href="https://github.com/atelierbram/syntax-highlighting"><svg width="452" height="96"><use xlink:href="#syntax"/></svg> <svg width="256" height="96"><use xlink:href="#colorschemes"/></svg> <span class="site-title conditionallyhidden">Syntax Highlighting</span><p class="tagline conditionallyhidden">colorschemes</p></a></h1></header><nav class="nav nav-site container"><ul class="nav_list nav-site_list"><li class=""><a href="http://atelierbram.github.io/syntax-highlighting/">Home</a></li><li class="current"><a href="http://atelierbram.github.io/syntax-highlighting/atelier-schemes/">Atelier Schemes</a></li><li class=""><a href="http://atelierbram.github.io/syntax-highlighting/base2tone">Base2Tone</a></li><li class=""><a href="http://atelierbram.github.io/syntax-highlighting/prism">Prism</a></li></ul></nav><main class="container" id="main"><article class="article article--demo"><h2>Atelier <small>colorschemes</small></h2><p>For the construction of these colorschemes, <a href="http://ethanschoonover.com/solarized">Solarized colorscheme</a> stood as a model, and <a href="https://github.com/chriskempson/base16-builder">Base16 Builder</a> was a building tool. Like in <a href="https://github.com/altercation/solarized/">Solarized</a>, the colorschemes come in a light – and in a dark background version. It’s really just variations on the same idea, but each with it’s own color-value relations, interdependent on each other and their base (background-)color, giving each colorscheme it’s own character.</p><p>More about the thought process behind some of the <a href="demo/changes-03-2015.html">documented updates and changes</a> made halfway during the time of creation.</p><h3 id="forest"><a href="forest">Forest</a></h3><p>Base color for Forest is orange, and the idea is to have brownish colors for the background, not unlike a colorscheme like <a href="http://joebergantine.com/projects/color-schemes/birds-of-paradise/">“Birds of Paradise”</a>, but a bit muddier on the browns, less red and more greyed out, like clay.</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" class="svg-colortiles"><g><rect x="0" y="0" width="150" height="150" fill="#1b1918"/><rect x="150" y="0" width="150" height="150" fill="#2c2421"/><rect x="300" y="0" width="150" height="150" fill="#68615e"/><rect x="450" y="0" width="150" height="150" fill="#766e6b"/><rect x="600" y="0" width="150" height="150" fill="#9c9491"/><rect x="750" y="0" width="150" height="150" fill="#a8a19f"/><rect x="900" y="0" width="150" height="150" fill="#e6e2e0"/><rect x="1050" y="0" width="150" height="150" fill="#f1efee"/><rect x="0" y="150" width="150" height="150" fill="#c38418"/><rect x="150" y="150" width="150" height="150" fill="#df5320"/><rect x="300" y="150" width="150" height="150" fill="#f22c40"/><rect x="450" y="150" width="150" height="150" fill="#c33ff3"/><rect x="600" y="150" width="150" height="150" fill="#6666ea"/><rect x="750" y="150" width="150" height="150" fill="#407ee7"/><rect x="900" y="150" width="150" height="150" fill="#3d97b8"/><rect x="1050" y="150" width="150" height="150" fill="#7b9726"/></g></svg><p>More <a href="forest/">information</a> on code, color-values and more ….</p><h3 id="plateau" class="mtm"><a href="plateau">Plateau</a></h3><p>Base color for Plateau is red, and here the background-colors have these chocolate brown/grey colors for the background, while the “color-wheel colors” are quite desaturated. A warm palette; no real green in here, (<i>see also “Cave”</i>).</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" class="svg-colortiles"><g><rect x="0" y="0" width="150" height="150" fill="#1b1818"/><rect x="150" y="0" width="150" height="150" fill="#292424"/><rect x="300" y="0" width="150" height="150" fill="#585050"/><rect x="450" y="0" width="150" height="150" fill="#655d5d"/><rect x="600" y="0" width="150" height="150" fill="#7e7777"/><rect x="750" y="0" width="150" height="150" fill="#8a8585"/><rect x="900" y="0" width="150" height="150" fill="#e7dfdf"/><rect x="1050" y="0" width="150" height="150" fill="#f4ecec"/><rect x="0" y="150" width="150" height="150" fill="#a06e3b"/><rect x="150" y="150" width="150" height="150" fill="#b45a3c"/><rect x="300" y="150" width="150" height="150" fill="#ca4949"/><rect x="450" y="150" width="150" height="150" fill="#bd5187"/><rect x="600" y="150" width="150" height="150" fill="#8464c4"/><rect x="750" y="150" width="150" height="150" fill="#7272ca"/><rect x="900" y="150" width="150" height="150" fill="#5485b6"/><rect x="1050" y="150" width="150" height="150" fill="#4b8b8b"/></g></svg><p>More <a href="plateau/">information</a> on code, color-values and more ….</p><h3 id="heath" class="mtm"><a href="heath">Heath</a></h3><p>Base color for Heath is magenta, and here the background-colors have these cool-red colors for the background, but then obviously toned down quite a bit ….</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" class="svg-colortiles"><g><rect x="0" y="0" width="150" height="150" fill="#1b181b"/><rect x="150" y="0" width="150" height="150" fill="#292329"/><rect x="300" y="0" width="150" height="150" fill="#695d69"/><rect x="450" y="0" width="150" height="150" fill="#776977"/><rect x="600" y="0" width="150" height="150" fill="#9e8f9e"/><rect x="750" y="0" width="150" height="150" fill="#ab9bab"/><rect x="900" y="0" width="150" height="150" fill="#d8cad8"/><rect x="1050" y="0" width="150" height="150" fill="#f7f3f7"/><rect x="0" y="150" width="150" height="150" fill="#bb8a35"/><rect x="150" y="150" width="150" height="150" fill="#a65926"/><rect x="300" y="150" width="150" height="150" fill="#ca402b"/><rect x="450" y="150" width="150" height="150" fill="#cc33cc"/><rect x="600" y="150" width="150" height="150" fill="#7b59c0"/><rect x="750" y="150" width="150" height="150" fill="#516aec"/><rect x="900" y="150" width="150" height="150" fill="#159393"/><rect x="1050" y="150" width="150" height="150" fill="#918b3b"/></g></svg><p>More <a href="heath/">information</a> on code, color-values and more ….</p><h3 id="cave" class="mtm"><a href="cave">Cave</a></h3><p>Base color for Cave is violet, and although the colors are regularly spaced out, there is no real green in here, (<i>see also “Plateau”</i>) a “cool-warm” palette; not for the claustrophobic.</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" class="svg-colortiles"><g><rect x="0" y="0" width="150" height="150" fill="#19171c"/><rect x="150" y="0" width="150" height="150" fill="#26232a"/><rect x="300" y="0" width="150" height="150" fill="#585260"/><rect x="450" y="0" width="150" height="150" fill="#655f6d"/><rect x="600" y="0" width="150" height="150" fill="#7e7887"/><rect x="750" y="0" width="150" height="150" fill="#8b8792"/><rect x="900" y="0" width="150" height="150" fill="#e2dfe7"/><rect x="1050" y="0" width="150" height="150" fill="#efecf4"/><rect x="0" y="150" width="150" height="150" fill="#a06e3b"/><rect x="150" y="150" width="150" height="150" fill="#aa573c"/><rect x="300" y="150" width="150" height="150" fill="#be4678"/><rect x="450" y="150" width="150" height="150" fill="#bf40bf"/><rect x="600" y="150" width="150" height="150" fill="#955ae7"/><rect x="750" y="150" width="150" height="150" fill="#576ddb"/><rect x="900" y="150" width="150" height="150" fill="#398bc6"/><rect x="1050" y="150" width="150" height="150" fill="#2a9292"/></g></svg><p>More <a href="cave/">information</a> on code, color-values and more ….</p><h3 id="sulphurpool" class="mtm"><a href="sulphurpool">Sulphurpool</a></h3><p>Base color for sulphurpool is purple, and here the background-colors have these grey purplish colors for the background. Darkest background-color needed not to be as desaturated as some of the warmer palettes, giving this colorscheme it’s otherworldly character. Yellow and green are close, because of avoidance of too greenish hues. In all: easy on the eye.</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" class="svg-colortiles"><g><rect x="0" y="0" width="150" height="150" fill="#202746"/><rect x="150" y="0" width="150" height="150" fill="#293256"/><rect x="300" y="0" width="150" height="150" fill="#5e6687"/><rect x="450" y="0" width="150" height="150" fill="#6b7394"/><rect x="600" y="0" width="150" height="150" fill="#898ea4"/><rect x="750" y="0" width="150" height="150" fill="#979db4"/><rect x="900" y="0" width="150" height="150" fill="#dfe2f1"/><rect x="1050" y="0" width="150" height="150" fill="#f5f7ff"/><rect x="0" y="150" width="150" height="150" fill="#c08b30"/><rect x="150" y="150" width="150" height="150" fill="#c76b29"/><rect x="300" y="150" width="150" height="150" fill="#c94922"/><rect x="450" y="150" width="150" height="150" fill="#9c637a"/><rect x="600" y="150" width="150" height="150" fill="#6679cc"/><rect x="750" y="150" width="150" height="150" fill="#3d8fd1"/><rect x="900" y="150" width="150" height="150" fill="#22a2c9"/><rect x="1050" y="150" width="150" height="150" fill="#ac9739"/></g></svg><p>More <a href="sulphurpool/">information</a> on code, color-values and more ….</p><h3 id="lakeside" class="mtm"><a href="lakeside">Lakeside</a></h3><p>Base color for Lakeside is blue, which means bluish colors for the background. Coolest colorscheme of the bunch, works very well in the light-background variant, for example on a webpage (<i>with Prism, or Higlight.js, e.g.</i>).</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" class="svg-colortiles"><g><rect x="0" y="0" width="150" height="150" fill="#161b1d"/><rect x="150" y="0" width="150" height="150" fill="#1f292e"/><rect x="300" y="0" width="150" height="150" fill="#516d7b"/><rect x="450" y="0" width="150" height="150" fill="#5a7b8c"/><rect x="600" y="0" width="150" height="150" fill="#7195a8"/><rect x="750" y="0" width="150" height="150" fill="#7ea2b4"/><rect x="900" y="0" width="150" height="150" fill="#c1e4f6"/><rect x="1050" y="0" width="150" height="150" fill="#ebf8ff"/><rect x="0" y="150" width="150" height="150" fill="#8a8a0f"/><rect x="150" y="150" width="150" height="150" fill="#935c25"/><rect x="300" y="150" width="150" height="150" fill="#d22d72"/><rect x="450" y="150" width="150" height="150" fill="#b72dd2"/><rect x="600" y="150" width="150" height="150" fill="#6b6bb8"/><rect x="750" y="150" width="150" height="150" fill="#257fad"/><rect x="900" y="150" width="150" height="150" fill="#2d8f6f"/><rect x="1050" y="150" width="150" height="150" fill="#568c3b"/></g></svg><p>More <a href="lakeside/">information</a> on code, color-values and more ….</p><h3 id="savanna" class="mtm"><a href="savanna">Savanna</a></h3><p>Base color for Savanna is green, it has greenish colors for the background. “Color-wheel colors” are desaturated considerably, giving this colorscheme a rather understated appeal and, dear I say it, a ‘natural’ look and feel.</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" class="svg-colortiles"><g><rect x="0" y="0" width="150" height="150" fill="#171c19"/><rect x="150" y="0" width="150" height="150" fill="#232a25"/><rect x="300" y="0" width="150" height="150" fill="#526057"/><rect x="450" y="0" width="150" height="150" fill="#5f6d64"/><rect x="600" y="0" width="150" height="150" fill="#78877d"/><rect x="750" y="0" width="150" height="150" fill="#87928a"/><rect x="900" y="0" width="150" height="150" fill="#dfe7e2"/><rect x="1050" y="0" width="150" height="150" fill="#ecf4ee"/><rect x="0" y="150" width="150" height="150" fill="#a07e3b"/><rect x="150" y="150" width="150" height="150" fill="#9f713c"/><rect x="300" y="150" width="150" height="150" fill="#b16139"/><rect x="450" y="150" width="150" height="150" fill="#867469"/><rect x="600" y="150" width="150" height="150" fill="#55859b"/><rect x="750" y="150" width="150" height="150" fill="#478c90"/><rect x="900" y="150" width="150" height="150" fill="#1c9aa0"/><rect x="1050" y="150" width="150" height="150" fill="#489963"/></g></svg><p>More <a href="savanna/">information</a> on code, color-values and more ….</p><h3 id="seaside" class="mtm"><a href="seaside">Seaside</a></h3><p>Base color for Seaside is green: greenish colors for the background. Very saturated color-palette; comes popping at you.</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" class="svg-colortiles"><g><rect x="0" y="0" width="150" height="150" fill="#131513"/><rect x="150" y="0" width="150" height="150" fill="#242924"/><rect x="300" y="0" width="150" height="150" fill="#5e6e5e"/><rect x="450" y="0" width="150" height="150" fill="#687d68"/><rect x="600" y="0" width="150" height="150" fill="#809980"/><rect x="750" y="0" width="150" height="150" fill="#8ca68c"/><rect x="900" y="0" width="150" height="150" fill="#cfe8cf"/><rect x="1050" y="0" width="150" height="150" fill="#f4fbf4"/><rect x="0" y="150" width="150" height="150" fill="#98981b"/><rect x="150" y="150" width="150" height="150" fill="#87711d"/><rect x="300" y="150" width="150" height="150" fill="#e6193c"/><rect x="450" y="150" width="150" height="150" fill="#e619c3"/><rect x="600" y="150" width="150" height="150" fill="#ad2bee"/><rect x="750" y="150" width="150" height="150" fill="#3d62f5"/><rect x="900" y="150" width="150" height="150" fill="#1999b3"/><rect x="1050" y="150" width="150" height="150" fill="#29a329"/></g></svg><p>More <a href="seaside/">information</a> on code, color-values and more ….</p><h3 id="estuary" class="mtm"><a href="estuary">Estuary</a></h3><p>Base color for Estuary is yellow-green, no real blue, red or purple in here, (<i>red goes to the orange</i>), only the yellow/greenish colors are saturated. Colors are all very close in terms of (mid-range) tonal-contrast (‘“grey value”). A bit of a poisonous colorscheme, be aware of the crocodiles …, they’re hiding in there.</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" class="svg-colortiles"><g><rect x="0" y="0" width="150" height="150" fill="#22221b"/><rect x="150" y="0" width="150" height="150" fill="#302f27"/><rect x="300" y="0" width="150" height="150" fill="#5f5e4e"/><rect x="450" y="0" width="150" height="150" fill="#6c6b5a"/><rect x="600" y="0" width="150" height="150" fill="#878573"/><rect x="750" y="0" width="150" height="150" fill="#929181"/><rect x="900" y="0" width="150" height="150" fill="#e7e6df"/><rect x="1050" y="0" width="150" height="150" fill="#f4f3ec"/><rect x="0" y="150" width="150" height="150" fill="#a5980d"/><rect x="150" y="150" width="150" height="150" fill="#ae7313"/><rect x="300" y="150" width="150" height="150" fill="#ba6236"/><rect x="450" y="150" width="150" height="150" fill="#9d6c7c"/><rect x="600" y="150" width="150" height="150" fill="#5f9182"/><rect x="750" y="150" width="150" height="150" fill="#36a166"/><rect x="900" y="150" width="150" height="150" fill="#5b9d48"/><rect x="1050" y="150" width="150" height="150" fill="#7d9726"/></g></svg><p>More <a href="estuary/">information</a> on code, color-values and more ….</p><h3 id="dune" class="mtm"><a href="dune">Dune</a></h3><p>Base color for Dune is yellow, and then warm yellowish brown greyed colors for the background. A welcoming, soothing friendly but also bright, colorscheme.</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" class="svg-colortiles"><g><rect x="0" y="0" width="150" height="150" fill="#20201d"/><rect x="150" y="0" width="150" height="150" fill="#292824"/><rect x="300" y="0" width="150" height="150" fill="#6e6b5e"/><rect x="450" y="0" width="150" height="150" fill="#7d7a68"/><rect x="600" y="0" width="150" height="150" fill="#999580"/><rect x="750" y="0" width="150" height="150" fill="#a6a28c"/><rect x="900" y="0" width="150" height="150" fill="#e8e4cf"/><rect x="1050" y="0" width="150" height="150" fill="#fefbec"/><rect x="0" y="150" width="150" height="150" fill="#ae9513"/><rect x="150" y="150" width="150" height="150" fill="#b65611"/><rect x="300" y="150" width="150" height="150" fill="#d73737"/><rect x="450" y="150" width="150" height="150" fill="#d43552"/><rect x="600" y="150" width="150" height="150" fill="#b854d4"/><rect x="750" y="150" width="150" height="150" fill="#6684e1"/><rect x="900" y="150" width="150" height="150" fill="#1fad83"/><rect x="1050" y="150" width="150" height="150" fill="#60ac39"/></g></svg><p>More <a href="dune">information</a> on code, color-values and more ….</p><h3 id="downloads" class="mtm">Downloads</h3><p>All downloads can be <a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output">found in the output</a> folder.</p><p class="note">Note: For Sublime Text, go to <a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output/textmate">Textmate folder</a>, or <a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output/textmate/textmate.zip">download the zip-file directly</a>.</p><p>For <a href="https://github.com/tpope/vim-pathogen">Vim with Pathogen</a> you can clone <a href="https://github.com/atelierbram/vim-colors_atelier-schemes">the dedicated repo for this purpose</a> in the <code>~/.vim/bundle</code> directory like so:</p><pre class="language-bashrc"><code class="language-bash">
cd ~/.vim/bundle
git clone https://github.com/atelierbram/vim-colors_atelier-schemes.git
</code></pre><pre class="language-bash" style="background:#ebf8ff;color:#516d7b;padding:1em;border:1px solid #d6eefb"><code class="language-bash" style="background:#ebf8ff;color:#516d7b">
cd <span style="color:#935c25">~</span><span style="color:#935c25">/</span><span class="token punctuation">.</span>vim<span style="color:#935c25">/</span>bundle
git clone https<span class="token punctuation">:</span><span style="color:#935c25">/</span><span class="token operator" style="color:#935c25">/</span>github<span class="token punctuation">.</span>com<span style="color:#935c25">/</span>atelierbram<span style="color:#935c25">/</span>vim<span style="color:#935c25">-</span>colors_atelier<span style="color:#935c25">-</span>schemes<span class="token punctuation">.</span>git
</code></pre><h3 id="demo" class="mtm">Demo</h3><ul><li><a href="http://atelierbram.github.io/syntax-highlighting/atelier-schemes/demo/highlight-js.html">Demo for Highlight.js</a></li><li><a href="http://atelierbram.github.io/syntax-highlighting/atelier-schemes/demo/prettify">Demo for <i>(Google Code)</i> Prettify</a></li><li><a href="http://atelierbram.github.io/syntax-highlighting/prism">Demo for Prism</a></li></ul><h3 id="#lab" class="mtm">Lab</h3><ul><li><a href="http://codepen.io/atelierbram/pen/JnbIt">Colorscheme Lab on CodePen</a></li><li><a href="https://gist.github.com/atelierbram/6283373">Colorscheme Lab as Github Gist</a></li></ul><h3 id="credits" class="mtm">Credits</h3><ul class="inline-block-list"><li>Credits to <a href="http://ethanschoonover.com/solarized">Ethan Schoonover</a> whose <a href="http://github.com/altercation/solarized">Solarized colorscheme</a> was a model for these colorschemes</li><li>And credits to <a href="http://chriskempson.com/">Chris Kempson</a>, whose <a href="https://github.com/chriskempson/base16-builder">Base16 Builder</a> was used for conversion to the different output formats. It’s a remarkable building tool, and I would also recommend trying out <a href="https://github.com/chriskempson/base16">the colorschemes</a> he made with them.</li></ul><a href="#header" class="go-to-top sh-button"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><g id="outline-black"><path fill="currentColor" opacity="0.5" d="M25,3L3,34l12-1v13h20V33l12,1L25,3z"/></g><g id="inner-white"><polygon fill="#FFFFFF" points="42,31 25,7 8,31 18,30 18,44 32,44 32,30"/></g></svg><span class="visuallyhidden">Go to Top</span></a></article></main><footer class="footer"><small><span class="visuallyhidden">by</span> <a href="http://atelierbramdehaan.nl"><svg width="48" height="48" class="logo-avatar"><use xlink:href="#logoAvatar"/></svg> <span class="visuallyhidden">Atelier Bram de Haan</span></a><span class=""><a href="https://github.com/atelierbram/syntax-highlighting"><span class="visuallyhidden">this repo on Github</span></a></span></small></footer><a href="https://github.com/atelierbram/syntax-highlighting" class="github-corner"><span class="visuallyhidden">This repo on Github</span><svg width="48" height="48" viewBox="0 0 250 250" style="fill:#73868c;color:#121516;position:absolute;top:0;border:0;right:0;z-index:4"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><script>!function(){"use strict";function a(a){l.push(a),1==l.length&&k()}function b(){for(;l.length;)l[0](),l.shift()}function c(a){this.a=m,this.b=void 0,this.f=[];var b=this;try{a(function(a){f(b,a)},function(a){g(b,a)})}catch(a){g(b,a)}}function d(a){return new c(function(b,c){c(a)})}function e(a){return new c(function(b){b(a)})}function f(a,b){if(a.a==m){if(b==a)throw new TypeError;var c=!1;try{var d=b&&b.then;if(null!=b&&"object"==typeof b&&"function"==typeof d)return void d.call(b,function(b){c||f(a,b),c=!0},function(b){c||g(a,b),c=!0})}catch(b){return void(c||g(a,b))}a.a=0,a.b=b,h(a)}}function g(a,b){if(a.a==m){if(b==a)throw new TypeError;a.a=1,a.b=b,h(a)}}function h(b){a(function(){if(b.a!=m)for(;b.f.length;){var a=b.f.shift(),c=a[0],d=a[1],e=a[2],a=a[3];try{0==b.a?e("function"==typeof c?c.call(void 0,b.b):b.b):1==b.a&&("function"==typeof d?e(d.call(void 0,b.b)):a(b.b))}catch(b){a(b)}}})}function i(a){return new c(function(b,c){function d(c){return function(d){g[c]=d,f+=1,f==a.length&&b(g)}}var f=0,g=[];0==a.length&&b(g);for(var h=0;h<a.length;h+=1)e(a[h]).c(d(h),c)})}function j(a){return new c(function(b,c){for(var d=0;d<a.length;d+=1)e(a[d]).c(b,c)})}var k,l=[];k=function(){setTimeout(b)};var m=2;c.prototype.g=function(a){return this.c(void 0,a)},c.prototype.c=function(a,b){var d=this;return new c(function(c,e){d.f.push([a,b,c,e]),h(d)})},window.Promise||(window.Promise=c,window.Promise.resolve=e,window.Promise.reject=d,window.Promise.race=j,window.Promise.all=i,window.Promise.prototype.then=c.prototype.c,window.Promise.prototype.catch=c.prototype.g)}(),function(){function a(a,b){document.addEventListener?a.addEventListener("scroll",b,!1):a.attachEvent("scroll",b)}function b(a){document.body?a():document.addEventListener?document.addEventListener("DOMContentLoaded",function b(){document.removeEventListener("DOMContentLoaded",b),a()}):document.attachEvent("onreadystatechange",function b(){"interactive"!=document.readyState&&"complete"!=document.readyState||(document.detachEvent("onreadystatechange",b),a())})}function c(a){this.a=document.createElement("div"),this.a.setAttribute("aria-hidden","true"),this.a.appendChild(document.createTextNode(a)),this.b=document.createElement("span"),this.c=document.createElement("span"),this.h=document.createElement("span"),this.f=document.createElement("span"),this.g=-1,this.b.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;",this.c.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;",this.f.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;",this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;",this.b.appendChild(this.h),this.c.appendChild(this.f),this.a.appendChild(this.b),this.a.appendChild(this.c)}function d(a,b){a.a.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;left:-999px;white-space:nowrap;font:"+b+";"}function e(a){var b=a.a.offsetWidth,c=b+100;return a.f.style.width=c+"px",a.c.scrollLeft=c,a.b.scrollLeft=a.b.scrollWidth+100,a.g!==b&&(a.g=b,!0)}function f(b,c){function d(){var a=f;e(a)&&null!==a.a.parentNode&&c(a.g)}var f=b;a(b.b,d),a(b.c,d),e(b)}function g(a,b){var c=b||{};this.family=a,this.style=c.style||"normal",this.weight=c.weight||"normal",this.stretch=c.stretch||"normal"}function h(){if(null===k){var a=document.createElement("div");try{a.style.font="condensed 100px sans-serif"}catch(a){}k=""!==a.style.font}return k}function i(a,b){return[a.style,a.weight,h()?a.stretch:"","100px",b].join(" ")}var j=null,k=null,l=null;g.prototype.load=function(a,e){var g=this,h=a||"BESbswy",k=e||3e3,m=(new Date).getTime();return new Promise(function(a,e){if(null===l&&(l=!!window.FontFace),l){var n=new Promise(function(a,b){function c(){(new Date).getTime()-m>=k?b():document.fonts.load(i(g,g.family),h).then(function(b){1<=b.length?a():setTimeout(c,25)},function(){b()})}c()}),o=new Promise(function(a,b){setTimeout(b,k)});Promise.race([o,n]).then(function(){a(g)},function(){e(g)})}else b(function(){function b(){var b;(b=-1!=q&&-1!=r||-1!=q&&-1!=s||-1!=r&&-1!=s)&&((b=q!=r&&q!=s&&r!=s)||(null===j&&(b=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),j=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))),b=j&&(q==t&&r==t&&s==t||q==u&&r==u&&s==u||q==v&&r==v&&s==v)),b=!b),b&&(null!==w.parentNode&&w.parentNode.removeChild(w),clearTimeout(x),a(g))}function l(){if((new Date).getTime()-m>=k)null!==w.parentNode&&w.parentNode.removeChild(w),e(g);else{var a=document.hidden;!0!==a&&void 0!==a||(q=n.a.offsetWidth,r=o.a.offsetWidth,s=p.a.offsetWidth,b()),x=setTimeout(l,50)}}var n=new c(h),o=new c(h),p=new c(h),q=-1,r=-1,s=-1,t=-1,u=-1,v=-1,w=document.createElement("div"),x=0;w.dir="ltr",d(n,i(g,"sans-serif")),d(o,i(g,"serif")),d(p,i(g,"monospace")),w.appendChild(n.a),w.appendChild(o.a),w.appendChild(p.a),document.body.appendChild(w),t=n.a.offsetWidth,u=o.a.offsetWidth,v=p.a.offsetWidth,l(),f(n,function(a){q=a,b()}),d(n,i(g,'"'+g.family+'",sans-serif')),f(o,function(a){r=a,b()}),d(o,i(g,'"'+g.family+'",serif')),f(p,function(a){s=a,b()}),d(p,i(g,'"'+g.family+'",monospace'))})})},"undefined"!=typeof module?module.exports=g:(window.FontFaceObserver=g,window.FontFaceObserver.prototype.load=g.prototype.load)}();var font=new FontFaceObserver("brando",{weight:400});font.load().then(function(){console.log("Font is available"),document.documentElement.className=document.documentElement.className.replace(/\bwf-inactive\b/g,"")+" wf-active "},function(){console.log("Font is not available")}),function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f),i.media=d||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media="only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this),function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(a){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);</script></body></html>