syntax-highlighting

Version:

Syntax Highlighting Colorschemes for many applications

github.com/atelierbram/syntax-highlighting

95 lines (78 loc) • 16.3 kB

HTML

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Heath 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/heath.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="../../atelier-schemes" 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="#" class="is-selected">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="../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-lakeside">Heath</h3> 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 …. <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-heath-bg {fill:#1b181b} .base01-heath-bg {fill:#292329} .base02-heath-bg {fill:#695d69} .base03-heath-bg {fill:#776977} .base04-heath-bg {fill:#9e8f9e} .base05-heath-bg {fill:#ab9bab} .base06-heath-bg {fill:#d8cad8} .base07-heath-bg {fill:#f7f3f7} .base08-heath-bg, .red-heath-bg {fill:#ca402b} .base09-heath-bg, .orange-heath-bg {fill:#a65926} .base0A-heath-bg, .yellow-heath-bg {fill:#bb8a35} .base0B-heath-bg, .green-heath-bg {fill:#918b3b} .base0C-heath-bg, .cyan-heath-bg {fill:#159393} .base0D-heath-bg, .blue-heath-bg {fill:#516aec} .base0E-heath-bg, .violet-heath-bg {fill:#7b59c0} .base0F-heath-bg, .magenta-heath-bg {fill:#cc33cc} text{font-size:1.875em}]]></style> <g> <rect x="0" y="0" width="300" height="300" class="base00-heath-bg" /> <rect x="300" y="0" width="300" height="300" class="base01-heath-bg" /> <rect x="600" y="0" width="300" height="300" class="base02-heath-bg" /> <rect x="900" y="0" width="300" height="300" class="base03-heath-bg" /> <rect x="0" y="300" width="300" height="300" class="base04-heath-bg" /> <rect x="300" y="300" width="300" height="300" class="base05-heath-bg" /> <rect x="600" y="300" width="300" height="300" class="base06-heath-bg" /> <rect x="900" y="300" width="300" height="300" class="base07-heath-bg" /> <rect x="0" y="600" width="300" height="300" class="yellow-heath-bg" /> <rect x="300" y="600" width="300" height="300" class="orange-heath-bg" /> <rect x="600" y="600" width="300" height="300" class="red-heath-bg" /> <rect x="900" y="600" width="300" height="300" class="magenta-heath-bg" /> <rect x="0" y="900" width="300" height="300" class="violet-heath-bg" /> <rect x="300" y="900" width="300" height="300" class="blue-heath-bg" /> <rect x="600" y="900" width="300" height="300" class="cyan-heath-bg" /> <rect x="900" y="900" width="300" height="300" class="green-heath-bg" /></g> <g> <text x="0" y="158" class="base07-heath-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-heath-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-heath-bg"> <tspan dx="100" dy="0">yellow</tspan> <tspan dx="210" dy="0">orange</tspan> <tspan dx="220" dy="0" class="base07-heath-bg">red</tspan> <tspan dx="210" dy="0" class="base07-heath-bg">magenta</tspan> </text> <text x="0" y="1060" class="base00-heath-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(300, 5%, 10%); /* #1b181b */ $base01: hsl(300, 8%, 15%); /* #292329 */ $base02: hsl(300, 6%, 39%); /* #695d69 */ $base03: hsl(300, 6%, 44%); /* #776977 */ $base04: hsl(300, 7%, 59%); /* #9e8f9e */ $base05: hsl(300, 9%, 64%); /* #ab9bab */ $base06: hsl(300, 16%, 86%); /* #d8cad8 */ $base07: hsl(300, 20%, 96%); /* #f7f3f7 */ $base08: hsl(8, 65%, 48%); /* #ca402b */ $base09: hsl(24, 63%, 40%); /* #a65926 */ $base0a: hsl(38, 56%, 47%); /* #bb8a35 */ $base0b: hsl(56, 42%, 40%); /* #918b3b */ $base0c: hsl(180, 75%, 33%); /* #159393 */ $base0d: hsl(230, 80%, 62%); /* #516aec */ $base0e: hsl(260, 45%, 55%); /* #7b59c0 */ $base0f: hsl(300, 60%, 50%); /* #c3c */ $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>