syntax-highlighting

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Syntax highlighting</title> <link href="assets/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> <link href="assets/css/app.css" media="screen, projection" rel="stylesheet" type="text/css" /> <style>.colortiles{margin:1em 0 2em}.mtl{margin-top:3em} .red-background{background-color:#d73737} .orange-background{background-color:#b65611} .yellow-background{background-color:#cfb017} .green-background{background-color:#60ac39} .cyan-background{background-color:#1fad83} .blue-background{background-color:#6684e1} .violet-background{background-color:#b854d4} .magenta-background{background-color:#d43552} </style>  <meta name="viewport" content="width=device-width"> <meta name="author" content="Bram de Haan"> <meta name="robots" content="index, follow"> <meta name="description" content="Colection of colorschemes for Code Syntax highlighting"/> <link rel="author" href="https://plus.google.com/+BramdeHaan/posts"> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" style="display:none"> <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> </svg>  <header class="row header"> <div class="large-4 columns"> <h1 class="repo-title"><a href="http://atelierbram.github.io/syntax-highlighting/">Syntax Highlighting <span class="tagline sh-small">colorschemes</span></a></h1> </div> <nav class="large-8 columns"> <ul class="inline-list right"> <li><a href="chrome-devtools">Chrome Devtools</a></li> <li><a href="lab">Lab</a></li> <li><a href="prism">Prism</a></li> <li><a href="duotones">Duotones</a></li> <li><a href="atelier-schemes/" data-dropdown="drop-atelierschemes" class="button dropdown dropdown-atelier">Atelier Schemes<span data-dropdown="drop-atelierschemes"></span></a><br> <ul id="drop-atelierschemes" class="f-dropdown small" data-dropdown-content> <li><a href="atelier-schemes">index - overview</a></li> <li><a href="atelier-schemes/forest">Forest</a></li> <li><a href="atelier-schemes/plateau">Plateau</a></li> <li><a href="atelier-schemes/heath">Heath</a></li> <li><a href="atelier-schemes/cave">Cave</a></li> <li><a href="atelier-schemes/sulphurpool">Sulphurpool</a></li> <li><a href="atelier-schemes/lakeside">Lakeside</a></li> <li><a href="atelier-schemes/savanna">Savanna</a></li> <li><a href="atelier-schemes/seaside">Seaside</a></li> <li><a href="atelier-schemes/estuary">Estuary</a></li> <li><a href="atelier-schemes/dune">Dune</a></li> <li><a href="atelier-schemes/output">Output</a></li> </ul> </li> </ul> </nav> </header>  <div class="row">   <article class="article article--demo"> <div id="wrap" class="inner-wrap"> <h3 class="mtl" id="duotones"><a href="duotones/">Duotones</a><svg class="new-theme-svg"><use xlink:href="#NewTheme" /></h3> <p>Based on <a href="http://simurai.com/projects/2016/01/01/duotone-themes/">DuoTone themes</a> by <a href="http://simurai.com/">Simurai</a> for Atom.</p> <p>Go to <a href="duotones/">demopage</a></p> <blockquote>“DuoTone themes use only 2 hues (7 shades in total). It <strong>tones down</strong> less important parts (like punctuation and brackets) and highlights only the <strong>important</strong> ones. This leads to a more calm color scheme, but still lets you find the stuff you’re looking for.”</blockquote> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300" class="colortiles"><g> <rect x="0" y="0" width="150" height="150" fill="#2a2734" /> <rect x="150" y="0" width="150" height="150" fill="#363442" /> <rect x="300" y="0" width="150" height="150" fill="#545167" /> <rect x="450" y="0" width="150" height="150" fill="#6c6783" /> <rect x="600" y="0" width="150" height="150" fill="#7e75a9" /> <rect x="750" y="0" width="150" height="150" fill="#6a51e6" /> <rect x="900" y="0" width="150" height="150" fill="#7a63ee" /> <rect x="1050" y="0" width="150" height="150" fill="#8b76f4" /> <rect x="0" y="150" width="150" height="150" fill="#9b87fd" /> <rect x="150" y="150" width="150" height="150" fill="#c4b8fe" /> <rect x="300" y="150" width="150" height="150" fill="#eeebff" /> <rect x="450" y="150" width="150" height="150" fill="#e09142" /> <rect x="600" y="150" width="150" height="150" fill="#ffb366" /> <rect x="750" y="150" width="150" height="150" fill="#ffba76" /> <rect x="900" y="150" width="150" height="150" fill="#ffcc99" /> <rect x="1050" y="150" width="150" height="150" fill="#7c756e" /> </g></svg> <pre class="prism-snippet" style="background-color:#2a2734;" class="screenshot language-javascript"><code style="color:#b3a5fe" class="language-javascript" data-language="javascript"><span class="token lf"> </span><span style="color:#fc9" class="token keyword">function</span> <span class="token function">foo<span style="color:#726e87" class="token punctuation">(</span></span>bar<span style="color:#726e87" class="token punctuation">)</span> <span style="color:#726e87" class="token punctuation">{</span><span class="token lf"> </span> <span style="color:#fc9" class="token keyword">var</span> a <span style="color:#e09142" class="token operator">=</span> <span style="color:#e09142" class="token number">42</span><span style="color:#726e87" class="token punctuation">,</span><span class="token lf"> </span> b <span style="color:#e09142" class="token operator">=</span> <span style="color:#fc9" class="token string">'Prism'</span><span style="color:#726e87" class="token punctuation">;</span><span class="token lf"> </span> <span style="color:#fc9" class="token keyword">return</span> a <span style="color:#e09142" class="token operator">+</span> <span class="token function">bar<span style="color:#726e87" class="token punctuation">(</span></span>b<span style="color:#726e87" class="token punctuation">)</span><span style="color:#726e87" class="token punctuation">;</span><span class="token lf"> </span><span style="color:#726e87" class="token punctuation">}</span></code></pre> <h3 class="mtl"><a href="atelier-schemes/">Atelier Schemes</a></h3> <ul> <li><a href="http://atelierbram.github.io/syntax-highlighting/atelier-schemes">index - demopages</a></li> <li><a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output">Downloads</a></li> </ul> <figure class="mtm mbl"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"> <style type="text/css"> <![CDATA[ .base00-dune-bg {fill:#20201d} .base01-dune-bg {fill:#292824} .base02-dune-bg {fill:#6e6b5e} .base03-dune-bg {fill:#7d7a68} .base04-dune-bg {fill:#999580} .base05-dune-bg {fill:#a6a28c} .base06-dune-bg {fill:#e8e4cf} .base07-dune-bg {fill:#fefbec} .base08-dune-bg, .red-dune-bg {fill:#d73737} .base09-dune-bg, .orange-dune-bg {fill:#b65611} .base0A-dune-bg, .yellow-dune-bg {fill:#ae9513} .base0B-dune-bg, .green-dune-bg {fill:#60ac39} .base0C-dune-bg, .cyan-dune-bg {fill:#1fad83} .base0D-dune-bg, .blue-dune-bg {fill:#6684e1} .base0E-dune-bg, .violet-dune-bg {fill:#b854d4} .base0F-dune-bg, .magenta-dune-bg {fill:#d43552} text{font-size:1.875em}]]></style> <g> <rect x="0" y="0" width="150" height="150" class="base00-dune-bg" /> <rect x="150" y="0" width="150" height="150" class="base01-dune-bg" /> <rect x="300" y="0" width="150" height="150" class="base02-dune-bg" /> <rect x="450" y="0" width="150" height="150" class="base03-dune-bg" /> <rect x="600" y="0" width="150" height="150" class="base04-dune-bg" /> <rect x="750" y="0" width="150" height="150" class="base05-dune-bg" /> <rect x="900" y="0" width="150" height="150" class="base06-dune-bg" /> <rect x="1050" y="0" width="150" height="150" class="base07-dune-bg" /> <rect x="0" y="150" width="150" height="150" class="yellow-dune-bg" /> <rect x="150" y="150" width="150" height="150" class="orange-dune-bg" /> <rect x="300" y="150" width="150" height="150" class="red-dune-bg" /> <rect x="450" y="150" width="150" height="150" class="magenta-dune-bg" /> <rect x="600" y="150" width="150" height="150" class="violet-dune-bg" /> <rect x="750" y="150" width="150" height="150" class="blue-dune-bg" /> <rect x="900" y="150" width="150" height="150" class="cyan-dune-bg" /> <rect x="1050" y="150" width="150" height="150" class="green-dune-bg" /> </g> </svg> <figcaption class="fig-cap"> <pre>Atelier Schemes, demotiles for Dune, syntax highlighting colorscheme</pre> </figcaption> </figure> <figure class="sh-fig sh-screenshot mtm mbl"> <img src="http://atelierbram.github.io/syntax-highlighting/assets/img/sulphurpool-dark_vim_640x425.png" alt="screenshot of Sulphurpool colorscheme - dark version - in Vim" class="img-block" /> <figcaption class="fig-cap"> <pre>Screenshot Sulphurpool – dark version – in Vim</pre> </figcaption> </figure> <h3 class="mtl"><a href="prism/">Prism</a></h3> <p>Colorschemes for Prism: <a href="http://atelierbram.github.io/syntax-highlighting/prism"> demopage</a></p> <figure class="sh-fig sh-screenshot mtm mbl"> <img src="https://lh6.googleusercontent.com/-27KX3QAEzAc/Ug9O3QH1t2I/AAAAAAAAAlw/tdEU6foUIXM/s800/prism-styleswitcher_screenshot_546x364.png" alt="screenshot of styleswitcher for Prism themes" class="img-block"> <figcaption class="fig-cap"> <pre>screenshot of styleswitcher for Prism themes</pre> </figcaption> </figure> <h3 class="mtl"><a href="chrome-devtools">Chrome DevTools</a></h3> <p>Solarized Light theme <a href="http://atelierbram.github.io/syntax-highlighting/chrome-devtools">demopage</a> </p> <figure class="sh-fig sh-screenshot mtm mbl"><img src="https://lh3.googleusercontent.com/-RBaou2IeYOw/Ug6SDCxgI0I/AAAAAAAAAlQ/0yR4Ugm2gGM/s800/screenshot_chrome-devtools_solarized-light_640x480.png" alt="Screenshot of Chrome DevTools (undocked), themed with Solarized-Light" class="img-block" /> <figcaption class="fig-cap"> <pre>Screenshot of Chrome DevTools (undocked), themed with Solarized-Light</pre> </figcaption> </figure> <h3 class="mtl"><a href="lab/">Colorscheme Lab</a></h3> <p>Try <a href="lab">Colorscheme Lab</a></p> <figure class="sh-fig sh-screenshot mtm mbl"> <img src="https://lh6.googleusercontent.com/-ZZiLu6PVYCc/UhT1RHORo3I/AAAAAAAAAnQ/bXsZ82HGwtI/s800/screenshot_colorscheme-lab_640x480.png" alt="Screenshot of Colorscheme Lab, a Code Syntax Highlighter Builder" class="img-block" /> <figcaption class="fig-cap"><pre>Screenshot of Colorscheme Lab, a Code Syntax Highlighter Builder</pre></figcaption></figure> <ul> <li><a href="http://codepen.io/atelierbram/pen/JnbIt">Colorscheme Lab on CodePen</a> <p data-height="295" data-theme-id="71" data-slug-hash="JnbIt" data-user="atelierbram" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/atelierbram/pen/JnbIt'>Colorscheme Lab – with Sass Variables</a> by Bram de Haan (<a href='http://codepen.io/atelierbram'>@atelierbram</a>) on <a href='http://codepen.io'>CodePen</a></p><script async src="http://codepen.io/assets/embed/ei.js"></script> </li> <li><a href="https://gist.github.com/atelierbram/6283373">Colorscheme Lab as Github Gist</a></li> <li><a href="http://devthemez.com">More Themes for Web Developer's Toys</a></li> </ul> </div> </article> </div>  <footer class="page-footer row"> <div class="large-12 columns"> <div class="row"> <div class="large-8 columns"> <p id="license" class="copyright">© 2013 <a href="http://atelierbramdehaan.nl" class="underline">Atelier Bram de Haan</a>, Releases under <a href="http://atelierbram.mit-license.org" class="underline">MIT License</a></p> </div> <div class="large-4 columns"> <a href="https://github.com/atelierbram/syntax-highlighting" class="sh-button">This repo on Github</a> </div> </div> </div> </footer> <script> document.write('<script src=' + ('__proto__' in {} ? 'assets/js/vendor/zepto.min' : 'assets/js/vendor/jquery') + '.js><\/script>') </script> <script src="assets/js/foundation/foundation.min.js"></script>     <script src="assets/js/foundation/foundation.dropdown.min.js"></script>           <script> $(document).foundation(); </script> <script>function insertTopborder() { $('<div class="rainbow-border"><span class="yellow-background"></span><span class="orange-background"></span><span class="red-background"></span><span class="magenta-background"></span><span class="violet-background"></span><span class="blue-background"></span><span class="cyan-background"></span><span class="green-background"></span></div>').insertBefore('#wrap'); } insertTopborder();</script> </body> </html>