syntax-highlighting

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>forest Colorscheme - 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" /> <link href="../../assets/css/forest.css" media="screen, projection" rel="stylesheet" type="text/css" /> <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/111567145811003203990/posts"> </head> <body> <header id="header" class="row header"> <div class="large-4 columns"> <h1 class="repo-title"><a href="http://atelierbram.github.io/syntax-highlighting/">Syntax Highlighting colorschemes</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="../" data-dropdown="drop-atelierschemes" class="button dropdown dropdown-atelier">Atelier Schemes</a> <ul id="drop-atelierschemes" class="f-dropdown small" data-dropdown-content> <li><a href="../">index - overview</a></li> <li><a href="#" class="is-selected">Forest</a></li> <li><a href="../plateau">Plateau</a></li> <li><a href="../heath">Heath</a></li> <li><a href="../cave">Cave</a></li> <li><a href="../sulphurpool">Sulphurpool</a></li> <li><a href="../lakeside">Lakeside</a></li> <li><a href="../savanna">Savanna</a></li> <li><a href="../seaside">Seaside</a></li> <li><a href="../estuary">Estuary</a></li> <li><a href="../dune">Dune</a></li> <li><a href="../heath">Heath</a></li> <li><a href="../sulphurpool">Sulphurpool</a></li> <li><a href="../lakeside">Lakeside</a></li> <li><a href="../seaside">Seaside</a></li> <li><a href="../dune">Dune</a></li> <li><a href="../output">output formats</a></li> </ul> </li> </ul> </nav> </header> <div class="row outer-wrap"> <article class="article article--demo"> <div id="wrap" class="inner-wrap"> <h2>Atelier colorscheme</h2> <h3 id="about-forest">Forest</h3> Starting point for Forest was to have brownish colors for the background, not unlike a colorsheme 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. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 1200"> <style type="text/css"> <![CDATA[ .base00-forest-bg {fill:#1b1918} .base01-forest-bg {fill:#2c2421} .base02-forest-bg {fill:#68615e} .base03-forest-bg {fill:#766e6b} .base04-forest-bg {fill:#9c9491} .base05-forest-bg {fill:#a8a19f} .base06-forest-bg {fill:#e6e2e0} .base07-forest-bg {fill:#f1efee} .base08-forest-bg, .red-forest-bg {fill:#f22c40} .base09-forest-bg, .orange-forest-bg {fill:#df5320} .base0A-forest-bg, .yellow-forest-bg {fill:#c38418} .base0B-forest-bg, .green-forest-bg {fill:#7b9726} .base0C-forest-bg, .cyan-forest-bg {fill:#3d97b8} .base0D-forest-bg, .blue-forest-bg {fill:#407ee7} .base0E-forest-bg, .violet-forest-bg {fill:#6666ea} .base0F-forest-bg, .magenta-forest-bg {fill:#c33ff3} text{font-size:2em}]]></style> <g> <rect x="0" y="0" width="300" height="300" class="base00-forest-bg" /> <rect x="300" y="0" width="300" height="300" class="base01-forest-bg" /> <rect x="600" y="0" width="300" height="300" class="base02-forest-bg" /> <rect x="900" y="0" width="300" height="300" class="base03-forest-bg" /> <rect x="0" y="300" width="300" height="300" class="base04-forest-bg" /> <rect x="300" y="300" width="300" height="300" class="base05-forest-bg" /> <rect x="600" y="300" width="300" height="300" class="base06-forest-bg" /> <rect x="900" y="300" width="300" height="300" class="base07-forest-bg" /> <rect x="0" y="600" width="300" height="300" class="yellow-forest-bg" /> <rect x="300" y="600" width="300" height="300" class="orange-forest-bg" /> <rect x="600" y="600" width="300" height="300" class="red-forest-bg" /> <rect x="900" y="600" width="300" height="300" class="magenta-forest-bg" /> <rect x="0" y="900" width="300" height="300" class="violet-forest-bg" /> <rect x="300" y="900" width="300" height="300" class="blue-forest-bg" /> <rect x="600" y="900" width="300" height="300" class="cyan-forest-bg" /> <rect x="900" y="900" width="300" height="300" class="green-forest-bg" /> </g> <g> <text x="0" y="158" class="base07-forest-bg"> <tspan dx="100" dy="0">base00</tspan> <tspan dx="190" dy="0">base01</tspan> <tspan dx="200" dy="0">base02</tspan> <tspan dx="195" dy="0">base03</tspan> </text> <text x="0" y="465" class="base00-forest-bg"> <tspan dx="100" dy="0">base04</tspan> <tspan dx="190" dy="0">base05</tspan> <tspan dx="200" dy="0">base06</tspan> <tspan dx="195" dy="0">base07</tspan> </text> <text x="0" y="760" class="base00-forest-bg"> <tspan dx="100" dy="0">yellow</tspan> <tspan dx="210" dy="0">orange</tspan> <tspan dx="220" dy="0" class="base07-forest-bg">red</tspan> <tspan dx="210" dy="0" class="base07-forest-bg">magenta</tspan> </text> <text x="0" y="1060" class="base00-forest-bg"> <tspan dx="100" dy="0">violet</tspan> <tspan dx="230" dy="0">blue</tspan> <tspan dx="235" dy="0">cyan</tspan> <tspan dx="225" dy="0">green</tspan> </text> </g> </svg> <h3 id="color-code" class="mtm no-border">Colors in code Scss variables</h3> <pre class="base00-background language-scss"><code class="language-scss sh-c-light"> $base00: hsl(20, 6%, 10%); /* #1b1918 */ $base01: hsl(16, 14%, 15%); /* #2c2421 */ $base02: hsl(18, 5%, 39%); /* #68615e */ $base03: hsl(16, 5%, 44%); /* #766e6b */ $base04: hsl(16, 5%, 59%); /* #9c9491 */ $base05: hsl(13, 5%, 64%); /* #a8a19f */ $base06: hsl(20, 11%, 89%); /* #e6e2e0 */ $base07: hsl(20, 10%, 94%); /* #f1efee */ $base08: hsl(354, 88%, 56%); /* #f22c40 */ $base09: hsl(16, 75%, 50%); /* #df5320 */ $base0a: hsl(38, 78%, 43%); /* #c38418 */ $base0b: hsl(75, 60%, 37%); /* #7b9726 */ $base0c: hsl(174, 100%, 34%); /* #00ad9c */ $base0d: hsl(218, 78%, 58%); /* #407ee7 */ $base0e: hsl(240, 76%, 66%); /* #6666ea */ $base0f: hsl(284, 88%, 60%); /* #c33ff3 */ $red: $base08; $orange: $base09; $yellow: $base0a; $green: $base0b; $cyan: $base0c; $blue: $base0d; $violet: $base0e; $magenta: $base0f; </code></pre> <pre class="base00-background base05"> require "gem" string = "base16" symbol = :base16 fixnum = 0 float = 0.00 array = Array.new array = ['chris', 85] hash = {"test" => "test"} regexp = /[abc]/ # This is a comment class Person attr_accessor :name def initialize(attributes = {}) @name = attributes[:name] end def self.greet "hello" end end person1 = Person.new(:name => "Chris") print Person::greet, " ", person1.name, "\n" puts "another #{Person::greet} #{person1.name}" </pre> <pre class="base07-background base02"> require "rubygems" string = "tomorrow" symbol = :tomorrow fixnum = 0 float = 0.00 array = Array.new array = ['chris', 85] hash = {"test" => "test"} regexp = /[abc]/ # This is a comment class Person attr_accessor :name def initialize(attributes = {}) @name = attributes[:name] end def self.greet "hello" end end person1 = Person.new(:name => "Chris") print Person::greet, " ", person1.name, "\n" puts "another #{Person::greet} #{person1.name}" </pre> <h3 id="downloads" class="mtm">Downloads</h3> All downloads can be found in the <a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output">output</a> folder. 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://atelierbram.github.io/syntax-highlighting/atelier-schemes/output/textmate/textmate.zip">download the zip-file directly</a>.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: <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 ~/.vim/bundle git clone https://github.com/atelierbram/vim-colors_atelier-schemes.git </code></pre> <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.</li> </ul> <a href="#header" class="go-to-top sh-button"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"> <g id="outline-black"> <path 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>⬆ Go to Top</a> </div> </article> <footer class="page-footer"> <div class="large-12 columns"> <div class="row"> <div class="large-8 columns"> © 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> </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> </div> <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 src="../../assets/js/vendor/custom.modernizr.js"></script> <script>function insertTopborder() { $('<div class="rainbow-border"></div>').insertBefore('#wrap'); } insertTopborder();</script></body> </html>