syntax-highlighting

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Estuary 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/estuary.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/+BramdeHaan/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="../forest">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="#" class="is-selected">Estuary</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 id="articleDemo" class="article article--demo"> <div id="wrap" class="inner-wrap"> <h2>Atelier colorscheme</h2> <h3 id="about-estuary">Estuary</h3> Base color for Estuary is yellow-green, no real blue, red or purple in here, (red goes to the orange), 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. <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-background { fill: hsl(55, 12%, 12%); } .base01-background { fill: hsl(55, 11%, 17%); } .base02-background { fill: hsl(55, 10%, 34%); } .base03-background { fill: hsl(55, 9%, 39%); } .base04-background { fill: hsl(55, 8%, 49%); } .base05-background { fill: hsl(55, 7%, 54%); } .base06-background { fill: hsl(55, 15%, 89%); } .base07-background { fill: hsl(55, 25%, 94%); } .base08-background, .red-background { fill: hsl(20, 55%, 47%); } .base09-background, .orange-background { fill: hsl(37, 80%, 38%); } .base0A-background, .yellow-background { fill: hsl(55, 85%, 35%); } .base0B-background, .green-background { fill: hsl(74, 60%, 37%); } .base0C-background, .cyan-background { fill: hsl(107, 37%, 45%) } .base0D-background, .blue-background { fill: hsl(147, 50%, 42%) } .base0E-background, .violet-background { fill: hsl(162, 21%, 47%) } .base0F-background, .magenta-background { fill: hsl(340, 20%, 52%) } text{font-size:2em}]]></style> <g> <rect x="0" y="0" width="300" height="300" class="base00-background" /> <rect x="300" y="0" width="300" height="300" class="base01-background" /> <rect x="600" y="0" width="300" height="300" class="base02-background" /> <rect x="900" y="0" width="300" height="300" class="base03-background" /> <rect x="0" y="300" width="300" height="300" class="base04-background" /> <rect x="300" y="300" width="300" height="300" class="base05-background" /> <rect x="600" y="300" width="300" height="300" class="base06-background" /> <rect x="900" y="300" width="300" height="300" class="base07-background" /> <rect x="0" y="600" width="300" height="300" class="yellow-background" /> <rect x="300" y="600" width="300" height="300" class="orange-background" /> <rect x="600" y="600" width="300" height="300" class="red-background" /> <rect x="900" y="600" width="300" height="300" class="magenta-background" /> <rect x="0" y="900" width="300" height="300" class="violet-background" /> <rect x="300" y="900" width="300" height="300" class="blue-background" /> <rect x="600" y="900" width="300" height="300" class="cyan-background" /> <rect x="900" y="900" width="300" height="300" class="green-background" /> </g> <g> <text x="0" y="158" class="base07-background"> <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-background"> <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-background"> <tspan dx="100" dy="0">yellow</tspan> <tspan dx="210" dy="0">orange</tspan> <tspan dx="220" dy="0" class="base07-background">red</tspan> <tspan dx="210" dy="0" class="base07-background">magenta</tspan> </text> <text x="0" y="1060" class="base00-background"> <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(55, 12%, 12%) /* #22221b */ $base01: hsl(55, 11%, 17%) /* #302f27 */ $base02: hsl(55, 10%, 34%) /* #5f5e4e */ $base03: hsl(55, 9%, 39%) /* #6c6b5a */ $base04: hsl(55, 8%, 49%) /* #878573 */ $base05: hsl(55, 7%, 54%) /* #929181 */ $base06: hsl(55, 15%, 89%) /* #e7e6df */ $base07: hsl(55, 25%, 94%) /* #f4f3ec */ $base08: hsl(20, 55%, 47%) /* #ba6236 */ $base09: hsl(37, 80%, 38%) /* #ae7313 */ $base0a: hsl(55, 85%, 35%) /* #a5980d */ $base0b: hsl(74, 60%, 37%) /* #7d9726 */ $base0c: hsl(107, 37%, 45% /* #5b9d48 */ $base0d: hsl(147, 50%, 42% /* #36a166 */ $base0e: hsl(162, 21%, 47% /* #5f9182 */ $base0f: hsl(340, 20%, 52% /* #9d6c7c */ $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>