cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <header class="header"><h1><a href="https://codepen.io/atelierbram/pen/JnbIt">Colorscheme Lab <span class="small">&#8211; with Sass variables</span></a></h1>
  <h2>code syntax highlighter builder</h2></header>
<div class="cf wrap">
  
<div class="col code-demo">
<h3>HTML</h3>
  <pre class="language-markup"><code  class="language-markup">
&lt;!-- main grid section --&gt; 
&lt;div class=&quot;row&quot;&gt; 
 &lt;div class=&quot;large-4 columns&quot;&gt;
   &lt;div class=&quot;panel&quot;&gt;
     &lt;h5&gt;panel title&lt;/h5&gt;
     &lt;p&gt;this is a three columns grid panel with an arbitrary height.&lt;/p&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class=&quot;large-6 columns&quot;&gt;
   &lt;div class=&quot;panel&quot;&gt;
     &lt;h5&gt;panel title&lt;/h5&gt;
     &lt;p&gt;this is a six columns grid panel with an arbitrary height. bacon ipsum dolor sit amet salami ham hock biltong ball tip drumstick sirloin pancetta meatball short loin.&lt;/p&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class=&quot;large-3  columns&quot;&gt;
   &lt;div class=&quot;panel&quot;&gt;
</code></pre>
<h3>CSS</h3>
<pre class="language-css"><code class="language-css"> 
/* comment */ 
@media only screen { 
footer { 
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
}
footer ul {
  list-style: none;
  padding-left: 0; 
} 
.cf:before,
.cf:after {
  content: "";
  display: table;
} 
.cf:after { clear: both !important; }
</code></pre>
<h3>Javascript</h3>
<pre class="language-javascript"><code class="language-javascript">
// comment
events : function () {
  var self = this;

  $(this.scope)
    .on(&#39;click.joyride&#39;, &#39;.joyride-next-tip, .joyride-modal-bg&#39;, function (e) {
      e.preventDefault();

      if (this.settings.$li.next().length &lt; 1) {
        this.end();
      } else if (this.settings.timer &gt; 0) {
        clearTimeout(this.settings.automate);
        this.hide();
        this.show();
        this.startTimer();
      } else {
        this.hide();
</code></pre>
<h3>SVG</h3>
<pre class="language-markup svg-markup"><code class="language-markup">
&lt;!-- http://www.w3.org/html/logo/downloads/HTML5_Badge.svg --&gt;

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;
  &lt;title&gt;HTML5 Logo Badge&lt;/title&gt;
  &lt;path fill=&quot;#E34F26&quot; d=&quot;M71,460 L30,0 481,0 440,460 255,512&quot;/&gt;
  &lt;path fill=&quot;#EF652A&quot; d=&quot;M256,472 L405,431 440,37 256,37&quot;/&gt;
  &lt;path fill=&quot;#EBEBEB&quot; d=&quot;M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z&quot;/&gt;
  &lt;path fill=&quot;#FFF&quot; d=&quot;M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z&quot;/&gt;
&lt;/svg&gt;

</code></pre>
  
<h3>About</h3>  
<pre class="language-"><code class="language- break-word">
<span class="blue"># Colorscheme Lab</span>  
Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme.     
  
When using <span class="red">[Base16 Builder](</span><span class="green">https://github.com/chriskempson/base16-builder</span><span class="red">)</span> as a building tool, you can, like Solarized, make colorschemes that come in a light, - and in a dark background version.          
  The Sass variables that are used here in this 'Colorscheme Lab', are basically the same as in the template.erb files by Base16 Builder, so after creating a colorscheme with this lab, converting to many application formats for syntax highlighting comes within reach.    
  Base16 Builder requires Ruby 1.9 or greater, see the repository for more information.
  
<span class="red">* [Atelier Schemes](</span><span class="green">https://atelierbram.github.io/syntax-highlighting/atelier-schemes</span><span class="red">)</span>
<span class="red">* [Base16 Builder](</span><span class="green">https://github.com/chriskempson/base16-builder</span>
<span class="red">* [This page as Gthub Gist](</span><span class="green">https://gist.github.com/atelierbram/6283373</span><span class="red">)</span>  
</code></pre>
</div>
  
<div class="col tiles-demo">
  
  
<h3 id="demo-tiles">Sixteen colors</h3>
 <div class="sh-c"> 
          <div class="unit base00-background sh-c-light">  base00  </div> 
          <div class="unit base01-background sh-c-light">  base01  </div>
          <div class="unit base02-background">  base02  </div>
          <div class="unit base03-background">  base03  </div>
          <div class="unit base04-background">  base04  </div>
          <div class="unit base05-background">  base05  </div>
          <div class="unit base06-background">  base06  </div>
          <div class="unit base07-background">  base07  </div>
          <div class="unit yellow-background">  yellow  </div>
          <div class="unit orange-background">  orange  </div>
          <div class="unit red-background">     red     </div>
          <div class="unit magenta-background"> magenta </div>
          <div class="unit violet-background">  violet  </div>
          <div class="unit blue-background">    blue    </div>
          <div class="unit cyan-background">    cyan    </div>
          <div class="unit green-background">   green   </div>   
 </div>

        <h3 id="color-code" class="mtm no-border">Colors in code <small>Scss variables</small></h3> 
         <pre class="base00-background language-scss"><code class="language-scss sh-c-light">
$base00: <span class="sh-c-comm">hsl(229, 37%, 20%); /* #202746 */</span>
$base01: <span class="base01-background sh-c-comm">hsl(229, 35%, 25%); /* #293256 */</span>
$base02: <span class="base02-background sh-c-comm sh-c-dark">hsl(228, 18%, 45%); /* #5e6687 */</span>
$base03: <span class="base03-background sh-c-comm sh-c-dark">hsl(229, 16%, 50%); /* #6b7394 */</span>
$base04: <span class="base04-background sh-c-comm sh-c-dark">hsl(229, 13%, 59%); /* #898ea4 */</span>
$base05: <span class="base05-background sh-c-comm sh-c-dark">hsl(229, 16%, 65%); /* #979db4 */</span>
$base06: <span class="base06-background sh-c-comm sh-c-dark">hsl(229, 40%, 91%); /* #dfe2f1 */</span>
$base07: <span class="base07-background sh-c-comm sh-c-dark">hsl(229, 94%, 98%); /* #f5f7ff */</span>
$base08: <span class="base08-background sh-c-comm sh-c-dark">hsl(14, 71%, 47%);; /* #c94922 */</span>
$base09: <span class="base09-background sh-c-comm sh-c-dark">hsl(25, 66%, 47%);  /* #c76b29 */</span>
$base0A: <span class="base0A-background sh-c-comm sh-c-dark">hsl(38, 60%, 47%);  /* #c08b30 */</span>
$base0B: <span class="base0B-background sh-c-comm sh-c-dark">hsl(177, 50%,45%);  /* #39aca6 */</span>
$base0C: <span class="base0C-background sh-c-comm sh-c-dark">hsl(194, 71%, 46%); /* #22a2c9 */</span>
$base0D: <span class="base0D-background sh-c-comm sh-c-dark">hsl(207, 62%, 53%); /* #3d8fd1 */</span>
$base0E: <span class="base0E-background sh-c-comm sh-c-dark">hsl(229, 50%, 60%); /* #6679cc */</span>
$base0F: <span class="base0F-background sh-c-comm sh-c-dark">hsl(336, 22%, 50%); /* #9c637a */</span> 
                                                              
<span class="red-background sh-c-comm sh-c-dark">$red:</span>     $base08;
<span class="orange-background sh-c-comm sh-c-dark">$orange:</span>  $base09;
<span class="yellow-background sh-c-comm sh-c-dark">$yellow:</span>  $base0A;
<span class="green-background sh-c-comm sh-c-dark">$green:</span>   $base0B;
<span class="cyan-background sh-c-comm sh-c-dark">$cyan:</span>    $base0C;
<span class="blue-background sh-c-comm sh-c-dark">$blue:</span>    $base0D;
<span class="violet-background sh-c-comm sh-c-dark">$violet:</span>  $base0E;
<span class="magenta-background sh-c-comm sh-c-dark">$magenta:</span> $base0F; 

        </code></pre>

      <pre class="base00-background base05">
<span class="base0E">require</span> <span class="base0B">"gem"</span>

<span class="base08">string</span> = <span class="base0B">"base16"</span>
<span class="base08">symbol</span> = <span class="base0B">:base16</span>
<span class="base08">fixnum</span> = <span class="base09">0</span>
<span class="base08">float</span>  = <span class="base09">0.00</span>
<span class="base08">array</span>  = <span class="base0A">Array</span>.<span class="base0D">new</span>
<span class="base08">array</span>  = [<span class="base0B">'chris'</span>, <span class="base09">85</span>]
<span class="base08">hash</span>   = {<span class="base0B">"test"</span> => <span class="base0B">"test"</span>}
<span class="base08">regexp</span> = <span class="base0C">/[abc]/</span>

<span class="base03"># This is a comment</span>
<span class="base0E">class</span> <span class="base0A">Person</span>

  <span class="base0D">attr_accessor</span> <span class="base0B">:name</span>

  <span class="base0E">def</span> <span class="base0D">initialize</span>(<span class="base08">attributes</span> = {})
    <span class="base08">@name</span> = <span class="base08">attributes</span>[<span class="base0B">:name</span>]
  <span class="base0E">end</span>

  <span class="base0E">def</span> <span class="base0E">self</span>.<span class="base0D">greet</span>
    <span class="base02-background"><span class="base0B">"hello"</span></span>
  <span class="base0E">end</span>
<span class="base0E">end</span>

<span class="base08">person1</span> = <span class="base0A">Person</span>.<span class="base0D">new</span>(<span class="base0B">:name</span> => <span class="base0B">"Chris"</span>)
<span class="base0D">print</span> <span class="base0A">Person</span>::<span class="base0D">greet</span>, <span class="base0B">" "</span>, <span class="base08">person1</span>.<span class="base0D">name</span>, <span class="base0B">"<span class="base09">\n</span>"</span>
<span class="base0D">puts</span> <span class="base0B">"another </span><span class="base0F">#{</span><span class="base0A">Person</span>::<span class="base0D">greet</span><span class="base0F">}</span> <span class="base0F">#{</span><span class="base08">person1</span>.<span class="base0D">name</span><span class="base0F">}</span><span class="base0B">"</span>
      </pre>

      <pre class="base07-background base02 border">
<span class="base0E">require</span> <span class="base0B">"rubygems"</span>

<span class="base08">string</span> = <span class="base0B">"tomorrow"</span>
<span class="base08">symbol</span> = <span class="base0B">:tomorrow</span>
<span class="base08">fixnum</span> = <span class="base09">0</span>
<span class="base08">float</span>  = <span class="base09">0.00</span>
<span class="base08">array</span>  = <span class="base0A">Array</span>.<span class="base0D">new</span>
<span class="base08">array</span>  = [<span class="base0B">'chris'</span>, <span class="base09">85</span>]
<span class="base08">hash</span>   = {<span class="base0B">"test"</span> => <span class="base0B">"test"</span>}
<span class="base08">regexp</span> = <span class="base0C">/[abc]/</span>

<span class="base03"># This is a comment</span>
<span class="base0E">class</span> <span class="base0A">Person</span>

  <span class="base0D">attr_accessor</span> <span class="base0B">:name</span>

  <span class="base0E">def</span> <span class="base0D">initialize</span>(<span class="base08">attributes</span> = {})
    <span class="base08">@name</span> = <span class="base08">attributes</span>[<span class="base0B">:name</span>]
  <span class="base0E">end</span>

  <span class="base0E">def</span> <span class="base0E">self</span>.<span class="base0D">greet</span>
    <span class="base06-background"><span class="base0B">"hello"</span></span>
  <span class="base0E">end</span>
<span class="base0E">end</span>

<span class="base08">person1</span> = <span class="base0A">Person</span>.<span class="base0D">new</span>(<span class="base0B">:name</span> => <span class="base0B">"Chris"</span>)
<span class="base0D">print</span> <span class="base0A">Person</span>::<span class="base0D">greet</span>, <span class="base0B">" "</span>, <span class="base08">person1</span>.<span class="base0D">name</span>, <span class="base0B">"<span class="base09">\n</span>"</span>
<span class="base0D">puts</span> <span class="base0B">"another </span><span class="base0F">#{</span><span class="base0A">Person</span>::<span class="base0D">greet</span><span class="base0F">}</span> <span class="base0F">#{</span><span class="base08">person1</span>.<span class="base0D">name</span><span class="base0F">}</span><span class="base0B">"</span>
      </pre> 
  
</div>
</div><!-- \.cf wrap -->   
<footer class="footer cf">
  <span class="col"><a href="https://atelierbram.github.io/syntax-highlighting/atelier-schemes">Atelier Colorschemes</a> with <a href="https://github.com/chriskempson/base16-builder">Base16</a>
  </span>
  <span class="col"><a href="https://atelierbram.github.io/syntax-highlighting/prism/">More Colorschemes for Prism</a></span> 
</footer> 
  


            
          
!
            
              @import "compass/css3";

// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
$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 */
// $base0B: hsl(177, 50%,45%);  /* #39aca6 */ // alternative green
$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-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; 
$code-font-size: 14px; 
$code-line-height: 1.375;
$code-background:	$base00;
$code-color: $base05;
$code-color-fade:	$base05;
// $code-text-shadow: none; 
$code-color-comment: $base02;
$code-color-keyword: $base0B;
$code-color-value: $base0C;
$code-color-attr-name:	$base09;
$code-color-string:	$base0C;
$code-color-name:	$base0A;
$code-color-number:	$base09;
$code-color-variable:	$base0D;
$code-color-selector:	$base0E; 
$code-color-property: $base0A;
$code-color-important: $base08;
$code-color-tag: $base0D;
$code-color-atrule: $base0C;

// @import "../partials/prism"; 
/**
 * Prism base code highlighter theme using Sass 
 *
 * @author @MoOx
 * https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss
 * slightly adapted by me, Bram de Haan
 */

// prism selector
$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
$code-selector-block: "pre[class*=\"language-\"]";
$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";

// generic stuff
$code-font-family: Menlo, Monaco, "Courier New", monospace	!default;
$code-font-size: 14px	!default;
$code-line-height: 1.375 !default;

$code-tab-size:	4	!default;
$code-hyphens: none	!default;

$code-block-padding: 12px	!default;
$code-inline-padding:	2px 6px	!default;
$code-border-radius: 5px !default;

$code-border:	1px solid #e1e1e8 !default;
$code-background:	#2a2a2a !default;
$code-color: #fff !default;
$code-color-fade:	#bebec5 !default;
// $code-text-shadow: 0 1px 0 #000 !default;
$code-box-shadow: 1px 1px .3em -.1em #000 inset !default;
$code-color-property: #b58900 !default;
$code-color-important: #cb4b16 !default;
$code-color-tag: #268bd2 !default; 
$code-color-atrule: #2aa198 !default;
$code-color-attr-name: #b65611 !default;

// $code-linenums-padding:		7px !default;
// $code-linenums-width: 			40px !default;
// $code-linenums-background:		#444 !default;
// $code-linenums-border-color:	#555 !default;
// $code-linenums-border-width:	1px !default;

@if $code-selector != null {
	#{$code-selector} {
		-moz-tab-size: $code-tab-size;
		-o-tab-size: $code-tab-size;
		tab-size: $code-tab-size;

		-webkit-hyphens: $code-hyphens;
		-moz-hyphens: $code-hyphens;
		-ms-hyphens: $code-hyphens;
		hyphens: $code-hyphens;

		// whitespace management
		white-space: pre; // fallback
		white-space: pre-wrap;
		word-break: break-all;
		word-wrap: break-word;
		
		font-family: $code-font-family;
		font-size: 	$code-font-size;
		line-height: $code-line-height;

		color: $code-color;
		// text-shadow: $code-text-shadow;
		background: $code-background;
	}
}

%code-background {
	border-radius: $code-border-radius;
	border: $code-border;
	box-shadow: $code-box-shadow;
}

@if $code-selector-block != null {
	#{$code-selector-block} {
		@extend %code-background;
		padding: $code-block-padding;
	}
}

@if $code-selector-inline != null {
	#{$code-selector-inline} {
		@extend %code-background;
		padding: $code-inline-padding;
	}
}

// pre[class*="language-"],
// :not(pre) > code[class*="language-"] {
// 	background: $code-background;
// }

// prism tokens
// 
$code-color-comment: null !default;
$code-color-keyword: null !default;
$code-color-value: null !default;
$code-color-string:	null !default;
$code-color-name:	null !default;
$code-color-number:	null !default;
$code-color-variable:	null !default;
$code-color-selector:	null !default;
$code-color-punctuation: $code-color-fade !default;

#{$code-selector} {
	.namespace {
		opacity: .7;
	}

	.token {
		&.comment,
		&.prolog,
		&.doctype,
		&.cdata {
			color: $code-color-comment;
		}

		&.null,
		&.operator,
		&.boolean,
		&.number {
			color: $code-color-number;
		}

		&.string {
			color: $code-color-string;
		}
 		&.attr-name {
			color: $code-color-attr-name;
		} 

		&.entity,
		&.url,
		.language-css &.string,
		.style &.string {
			color: $code-color-string;
		}

		&.selector {
			color: $code-color-selector;
		}
     
		&.attr-value,
		&.keyword,
		&.control,
		&.directive,
		&.unit {
			color: $code-color-keyword;
		} 
		&.important {
			color: $code-color-important;
		} 
		&.atrule{
			color: $code-color-atrule;
    }

		&.regex,
		&.statement {
			color: $code-color-value;
		}

		&.placeholder,
		&.variable {
			color: $code-color-variable;
		}

		&.property,
		&.tag {
		 // font-style: italic;
		}

 		&.property {
      color: $code-color-property;
		}
 		&.tag {
      color: $code-color-tag;
		}
 

		&.important,
		&.statement {
			font-weight: bold;
		}

		// todo ?
		// &.mixin
		// &.gradient
		// &.abslength
		// &.easing
		// &.time
		// &.angle
		// &.fontfamily

		// ruby/vim https://github.com/LeaVerou/prism/pull/18
		// &.inst-var
		// &.builtin
		// &.const
		// &.symbol
		//
		// php https://github.com/LeaVerou/prism/pull/20
		// &.deliminator
		// &.function

		&.punctuation {
			color: $code-color-punctuation;
		}

		&.entity {
			cursor: help;
		}

		// for dev :)
		&.debug { color: red }
	}
}

// generic demo styles
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  background-color: $base07;  
}
body,
.header h1 .small {
  font: normal 100%/1.375 AvenirNext-Regular, Corbel, "Segoe Ui", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
.header,
.footer { 
  padding: .5em 0; 
  background: darken($blue,25);
  color: $base07;
  width: 100%; 
  text-align: center;  
  @include text-shadow (darken($blue,50) 1px 1px 1px);
}
.header { 
  border-bottom: 2px solid darken($blue,35);
}
.footer { 
  border-top: 2px solid $blue;
  padding-bottom: 2em;
  letter-spacing: 1px;
}
.header a,
.footer a { 
  color: lighten($yellow,25);
  text-decoration: none;
}
h1, h3 {
  font-family: AvenirNextCondensed-DemiBold, AvenirNextCondensed-Bold, Corbel, "Lucida Grande", "Lucida Sans", "Trebuchet Ms", "DejaVu Sans", Verdana, sans-serif;
}
h1 {
  font-size: 1.5em;
  text-transform: uppercase; 
  letter-spacing: 2px;
}
h2 {
  font-size: 1.125em;
  text-transform: capitalize; 
  font-weight: normal;
  letter-spacing: 1px;
}
.header h1 .small {
  font-size: 0.75em;
  text-transform: none;
  letter-spacing: 1px;
  color: $base06;
}
.base00-background  { background-color: $base00;  }
.base01-background  { background-color: $base01;  }
.base02-background  { background-color: $base02;  }
.base03-background  { background-color: $base03;  }
.base04-background  { background-color: $base04;  }
.base05-background  { background-color: $base05;  }
.base06-background  { background-color: $base06;  }
.base07-background  { background-color: $base07;  }
.base08-background, 
.red-background     { background-color: $red;     } 
.base09-background, 
.orange-background  { background-color: $orange;  } 
.base0A-background, 
.yellow-background  { background-color: $yellow;  }
.base0B-background, 
.green-background   { background-color: $green;   }
.base0C-background, 
.cyan-background    { background-color: $cyan;    }
.base0D-background, 
.blue-background    { background-color: $blue;    }
.base0E-background, 
.violet-background  { background-color: $violet;  }
.base0F-background, 
.magenta-background { background-color: $magenta; }

.base00  { color: $base00;  }
.base01  { color: $base01;  }
.base02  { color: $base02;  }
.base03  { color: $base03;  }
.base04  { color: $base04;  }
.base05  { color: $base05;  }
.base06  { color: $base06;  }
.base07  { color: $base07;  }
.base08, 
.red     { color: $red;     } 
.base09, 
.orange  { color: $orange;  } 
.base0A, 
.yellow  { color: $yellow;  }
.base0B, 
.green   { color: $green;   }
.base0C, 
.cyan    { color: $cyan;    }
.base0D, 
.blue    { color: $blue;    }
.base0E, 
.violet  { color: $violet;  }
.base0F, 
.magenta { color: $magenta; }

pre[class*="language"].base00-background {
  background-color: $base00; 
} 
.sh-c {
  overflow: auto; 
  color: #1b1918 !important; 
} 
.sh-c-comm {
  padding: .2em .5em; 
  display: inline-block;
}
.sh-c-light,
.sh-c-light .comment {
  color: #a8a19f !important; 
}
.sh-c-dark,
.sh-c-dark .comment {
  color: #1b1918 !important; 
}
pre[class^="base"] {
padding: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
margin: .5em 0;
}
.wrap {
  margin-top: 1em; 
  padding: 0 2em;
}
.cf:before,
.cf:after {
  content: " "; 
  display: table;
}
.cf:after,
.clear {
  clear: both;
}
.col {
  float: left;
}
.code-demo {
  padding-right: 1em;
}
.tiles-demo {
  padding-left: 1em;
}
.unit { 
  float: left;
  width: 25%; 
  padding: 4em 0;
  text-align: center; 
}
h3 {
  margin: 1em 0 0 0.75em;
}
/*
.token a {
	color: $yellow;
}
*/
.border {
  border: 1px solid $base05; 
}
.language- .break-word {
  word-break: break-word;
}
@media only screen and (min-width:750px) {
  .col {
    width: 50%;
  }
}
            
          
!
            
              /* **********************************************
     Begin prism-core.js
********************************************** */

/**
 * Prism: Lightweight, robust, elegant syntax highlighting
 * MIT license https://www.opensource.org/licenses/mit-license.php/
 * @author Lea Verou http://lea.verou.me
 */

(function(){

// Private helper vars
var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;

var _ = self.Prism = {
	util: {
		type: function (o) { 
			return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];
		},
		
		// Deep clone a language definition (e.g. to extend it)
		clone: function (o) {
			var type = _.util.type(o);

			switch (type) {
				case 'Object':
					var clone = {};
					
					for (var key in o) {
						if (o.hasOwnProperty(key)) {
							clone[key] = _.util.clone(o[key]);
						}
					}
					
					return clone;
					
				case 'Array':
					return o.slice();
			}
			
			return o;
		}
	},
	
	languages: {
		extend: function (id, redef) {
			var lang = _.util.clone(_.languages[id]);
			
			for (var key in redef) {
				lang[key] = redef[key];
			}
			
			return lang;
		},
		
		// Insert a token before another token in a language literal
		insertBefore: function (inside, before, insert, root) {
			root = root || _.languages;
			var grammar = root[inside];
			var ret = {};
				
			for (var token in grammar) {
			
				if (grammar.hasOwnProperty(token)) {
					
					if (token == before) {
					
						for (var newToken in insert) {
						
							if (insert.hasOwnProperty(newToken)) {
								ret[newToken] = insert[newToken];
							}
						}
					}
					
					ret[token] = grammar[token];
				}
			}
			
			return root[inside] = ret;
		},
		
		// Traverse a language definition with Depth First Search
		DFS: function(o, callback) {
			for (var i in o) {
				callback.call(o, i, o[i]);
				
				if (_.util.type(o) === 'Object') {
					_.languages.DFS(o[i], callback);
				}
			}
		}
	},

	highlightAll: function(async, callback) {
		var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');

		for (var i=0, element; element = elements[i++];) {
			_.highlightElement(element, async === true, callback);
		}
	},
		
	highlightElement: function(element, async, callback) {
		// Find language
		var language, grammar, parent = element;
		
		while (parent && !lang.test(parent.className)) {
			parent = parent.parentNode;
		}
		
		if (parent) {
			language = (parent.className.match(lang) || [,''])[1];
			grammar = _.languages[language];
		}

		if (!grammar) {
			return;
		}
		
		// Set language on the element, if not present
		element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
		
		// Set language on the parent, for styling
		parent = element.parentNode;
		
		if (/pre/i.test(parent.nodeName)) {
			parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; 
		}

		var code = element.textContent;
		
		if(!code) {
			return;
		}
		
		code = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
		
		var env = {
			element: element,
			language: language,
			grammar: grammar,
			code: code
		};
		
		_.hooks.run('before-highlight', env);
		
		if (async && self.Worker) {
			var worker = new Worker(_.filename);	
			
			worker.onmessage = function(evt) {
				env.highlightedCode = Token.stringify(JSON.parse(evt.data), language);

				_.hooks.run('before-insert', env);

				env.element.innerHTML = env.highlightedCode;
				
				callback && callback.call(env.element);
				_.hooks.run('after-highlight', env);
			};
			
			worker.postMessage(JSON.stringify({
				language: env.language,
				code: env.code
			}));
		}
		else {
			env.highlightedCode = _.highlight(env.code, env.grammar, env.language)

			_.hooks.run('before-insert', env);

			env.element.innerHTML = env.highlightedCode;
			
			callback && callback.call(element);
			
			_.hooks.run('after-highlight', env);
		}
	},
	
	highlight: function (text, grammar, language) {
		return Token.stringify(_.tokenize(text, grammar), language);
	},
	
	tokenize: function(text, grammar, language) {
		var Token = _.Token;
		
		var strarr = [text];
		
		var rest = grammar.rest;
		
		if (rest) {
			for (var token in rest) {
				grammar[token] = rest[token];
			}
			
			delete grammar.rest;
		}
								
		tokenloop: for (var token in grammar) {
			if(!grammar.hasOwnProperty(token) || !grammar[token]) {
				continue;
			}
			
			var pattern = grammar[token], 
				inside = pattern.inside,
				lookbehind = !!pattern.lookbehind,
				lookbehindLength = 0;
			
			pattern = pattern.pattern || pattern;
			
			for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop
				
				var str = strarr[i];
				
				if (strarr.length > text.length) {
					// Something went terribly wrong, ABORT, ABORT!
					break tokenloop;
				}
				
				if (str instanceof Token) {
					continue;
				}
				
				pattern.lastIndex = 0;
				
				var match = pattern.exec(str);
				
				if (match) {
					if(lookbehind) {
						lookbehindLength = match[1].length;
					}

					var from = match.index - 1 + lookbehindLength,
					    match = match[0].slice(lookbehindLength),
					    len = match.length,
					    to = from + len,
						before = str.slice(0, from + 1),
						after = str.slice(to + 1); 

					var args = [i, 1];
					
					if (before) {
						args.push(before);
					}
					
					var wrapped = new Token(token, inside? _.tokenize(match, inside) : match);
					
					args.push(wrapped);
					
					if (after) {
						args.push(after);
					}
					
					Array.prototype.splice.apply(strarr, args);
				}
			}
		}

		return strarr;
	},
	
	hooks: {
		all: {},
		
		add: function (name, callback) {
			var hooks = _.hooks.all;
			
			hooks[name] = hooks[name] || [];
			
			hooks[name].push(callback);
		},
		
		run: function (name, env) {
			var callbacks = _.hooks.all[name];
			
			if (!callbacks || !callbacks.length) {
				return;
			}
			
			for (var i=0, callback; callback = callbacks[i++];) {
				callback(env);
			}
		}
	}
};

var Token = _.Token = function(type, content) {
	this.type = type;
	this.content = content;
};

Token.stringify = function(o, language, parent) {
	if (typeof o == 'string') {
		return o;
	}

	if (Object.prototype.toString.call(o) == '[object Array]') {
		return o.map(function(element) {
			return Token.stringify(element, language, o);
		}).join('');
	}
	
	var env = {
		type: o.type,
		content: Token.stringify(o.content, language, parent),
		tag: 'span',
		classes: ['token', o.type],
		attributes: {},
		language: language,
		parent: parent
	};
	
	if (env.type == 'comment') {
		env.attributes['spellcheck'] = 'true';
	}
	
	_.hooks.run('wrap', env);
	
	var attributes = '';
	
	for (var name in env.attributes) {
		attributes += name + '="' + (env.attributes[name] || '') + '"';
	}
	
	return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>';
	
};

if (!self.document) {
	// In worker
	self.addEventListener('message', function(evt) {
		var message = JSON.parse(evt.data),
		    lang = message.language,
		    code = message.code;
		
		self.postMessage(JSON.stringify(_.tokenize(code, _.languages[lang])));
		self.close();
	}, false);
	
	return;
}

// Get current script and highlight
var script = document.getElementsByTagName('script');

script = script[script.length - 1];

if (script) {
	_.filename = script.src;
	
	if (document.addEventListener && !script.hasAttribute('data-manual')) {
		document.addEventListener('DOMContentLoaded', _.highlightAll);
	}
}

})();

/* **********************************************
     Begin prism-markup.js
********************************************** */

Prism.languages.markup = {
	'comment': /&lt;!--[\w\W]*?-->/g,
	'prolog': /&lt;\?.+?\?>/,
	'doctype': /&lt;!DOCTYPE.+?>/,
	'cdata': /&lt;!\[CDATA\[[\w\W]*?]]>/i,
	'tag': {
		pattern: /&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,
		inside: {
			'tag': {
				pattern: /^&lt;\/?[\w:-]+/i,
				inside: {
					'punctuation': /^&lt;\/?/,
					'namespace': /^[\w-]+?:/
				}
			},
			'attr-value': {
				pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,
				inside: {
					'punctuation': /=|>|"/g
				}
			},
			'punctuation': /\/?>/g,
			'attr-name': {
				pattern: /[\w:-]+/g,
				inside: {
					'namespace': /^[\w-]+?:/
				}
			}
			
		}
	},
	'entity': /&amp;#?[\da-z]{1,8};/gi
};

// Plugin to make entity title show the real entity, idea by Roman Komarov
Prism.hooks.add('wrap', function(env) {

	if (env.type === 'entity') {
		env.attributes['title'] = env.content.replace(/&amp;/, '&');
	}
});

/* **********************************************
     Begin prism-css.js
********************************************** */

Prism.languages.css = {
	'comment': /\/\*[\w\W]*?\*\//g,
	'atrule': {
		pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi,
		inside: {
			'punctuation': /[;:]/g
		}
	},
	'url': /url\((["']?).*?\1\)/gi,
	'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g,
	'property': /(\b|\B)[\w-]+(?=\s*:)/ig,
	'string': /("|')(\\?.)*?\1/g,
	'important': /\B!important\b/gi,
	'ignore': /&(lt|gt|amp);/gi,
	'punctuation': /[\{\};:]/g
};

if (Prism.languages.markup) {
	Prism.languages.insertBefore('markup', 'tag', {
		'style': {
			pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,
			inside: {
				'tag': {
					pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,
					inside: Prism.languages.markup.tag.inside
				},
				rest: Prism.languages.css
			}
		}
	});
}

/* **********************************************
     Begin prism-clike.js
********************************************** */

Prism.languages.clike = {
	'comment': {
		pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,
		lookbehind: true
	},
	'string': /("|')(\\?.)*?\1/g,
	'class-name': {
		pattern: /((?:class|interface|extends|implements|trait|instanceof|new)\s+)[a-z0-9_\.\\]+/ig,
		lookbehind: true,
		inside: {
			punctuation: /(\.|\\)/
		}
	},
	'keyword': /\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g,
	'boolean': /\b(true|false)\b/g,
	'function': {
		pattern: /[a-z0-9_]+\(/ig,
		inside: {
			punctuation: /\(/
		}
	},
	'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,
	'operator': /[-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,
	'ignore': /&(lt|gt|amp);/gi,
	'punctuation': /[{}[\];(),.:]/g
};

/* **********************************************
     Begin prism-javascript.js
********************************************** */

Prism.languages.javascript = Prism.languages.extend('clike', {
	'keyword': /\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,
	'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g
});

Prism.languages.insertBefore('javascript', 'keyword', {
	'regex': {
		pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,
		lookbehind: true
	}
});

if (Prism.languages.markup) {
	Prism.languages.insertBefore('markup', 'tag', {
		'script': {
			pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,
			inside: {
				'tag': {
					pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,
					inside: Prism.languages.markup.tag.inside
				},
				rest: Prism.languages.javascript
			}
		}
	});
}

/* **********************************************
     Begin prism-file-highlight.js
********************************************** */

(function(){

if (!self.Prism || !self.document || !document.querySelector) {
	return;
}

var Extensions = {
	'js': 'javascript',
	'html': 'markup',
	'svg': 'markup'
};

Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function(pre) {
	var src = pre.getAttribute('data-src');
	var extension = (src.match(/\.(\w+)$/) || [,''])[1];
	var language = Extensions[extension] || extension;
	
	var code = document.createElement('code');
	code.className = 'language-' + language;
	
	pre.textContent = '';
	
	code.textContent = 'Loading…';
	
	pre.appendChild(code);
	
	var xhr = new XMLHttpRequest();
	
	xhr.open('GET', src, true);

	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			
			if (xhr.status < 400 && xhr.responseText) {
				code.textContent = xhr.responseText;
			
				Prism.highlightElement(code);
			}
			else if (xhr.status >= 400) {
				code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
			}
			else {
				code.textContent = '✖ Error: File does not exist or is empty';
			}
		}
	};
	
	xhr.send(null);
});

})();

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console