syntax-highlighting

Version:

Syntax Highlighting Colorschemes for many applications

github.com/atelierbram/syntax-highlighting

94 lines (78 loc) • 16.6 kB

HTML

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Sulphurpool 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/sulphurpool.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="#" class="is-selected">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-sulphurpool">Sulphurpool</h3>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.<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:#202746} .base01-background {fill:#293256} .base02-background {fill:#5e6687} .base03-background {fill:#6b7394} .base04-background {fill:#898ea4} .base05-background {fill:#979db4} .base06-background {fill:#dfe2f1} .base07-background {fill:#f5f7ff} .base08-background, .red-background {fill:#c94922} .base09-background, .orange-background {fill:#c76b29} .base0A-background, .yellow-background {fill:#c08b30} .base0B-background, .green-background {fill:#ac9739} .base0C-background, .cyan-background {fill:#22a2c9} .base0D-background, .blue-background {fill:#3d8fd1} .base0E-background, .violet-background {fill:#6679cc} .base0F-background, .magenta-background {fill:#9c637a} text{font-size:1.875em}]]></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(229, 37%, 20%); /* #202746 */ $base01: hsl(229, 35%, 25%); /* #293256 */ $base02: hsl(228, 18%, 45%); /* #5e6687 */ $base03: hsl(229, 16%, 50%); /* #6b7394 */ $base04: hsl(229, 13%, 59%); /* #898ea4 */ $base05: hsl(229, 16%, 65%); /* #979db4 */ $base06: hsl(229, 40%, 91%); /* #dfe2f1 */ $base07: hsl(229, 94%, 98%); /* #f5f7ff */ $base08: hsl(14, 71%, 47%);; /* #c94922 */ $base09: hsl(25, 66%, 47%); /* #c76b29 */ $base0a: hsl(38, 60%, 47%); /* #c08b30 */ $base0b: hsl(49, 50%, 45%); /* #ac9739 */ $base0c: hsl(194, 71%, 46%); /* #22a2c9 */ $base0d: hsl(207, 62%, 53%); /* #3d8fd1 */ $base0e: hsl(229, 50%, 60%); /* #6679cc */ $base0f: hsl(336, 22%, 50%); /* #9c637a */ $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>