add syntax highlighting for json examples

_includes/head.html

@@ -11,7 +11,9 @@
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: full_base_url }}"/>
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: full_base_url }}"/>
   <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | prepend: full_base_url }}"/>
-
+
+  <script src="{{ "/js/prism.js" | prepend: full_base_url }}" defer async></script>
+
   {% if jekyll.environment == 'production' and site.google_analytics %}
   {% include google-analytics.html %}
   {% endif %}

_sass/minima.scss

@@ -39,5 +39,5 @@ $on-laptop:        800px !default;
 @import
   "minima/base",
   "minima/layout",
-  "minima/syntax-highlighting"
+  "minima/prism"
 ;

_sass/minima/_base.scss

@@ -132,7 +132,6 @@ code {
     font-size: 15px;
     border: 1px solid $grey-color-light;
     border-radius: 3px;
-    background-color: #eef;
 }
 
 code {

_sass/minima/prism.scss

@@ -0,0 +1,149 @@
+/* http://prismjs.com/download.html?themes=prism-solarizedlight&languages=json&plugins=normalize-whitespace */
+/*
+ Solarized Color Schemes originally by Ethan Schoonover
+ http://ethanschoonover.com/solarized
+
+ Ported for PrismJS by Hector Matos
+ Website: https://krakendev.io
+ Twitter Handle: https://twitter.com/allonsykraken)
+*/
+
+/*
+SOLARIZED HEX
+--------- -------
+base03    #002b36
+base02    #073642
+base01    #586e75
+base00    #657b83
+base0     #839496
+base1     #93a1a1
+base2     #eee8d5
+base3     #fdf6e3
+yellow    #b58900
+orange    #cb4b16
+red       #dc322f
+magenta   #d33682
+violet    #6c71c4
+blue      #268bd2
+cyan      #2aa198
+green     #859900
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #657b83; /* base00 */
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	background: #073642; /* base02 */
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	background: #073642; /* base02 */
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background-color: #fdf6e3; /* base3 */
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #93a1a1; /* base1 */
+}
+
+.token.punctuation {
+	color: #586e75; /* base01 */
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #268bd2; /* blue */
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.url,
+.token.inserted {
+	color: #2aa198; /* cyan */
+}
+
+.token.entity {
+	color: #657b83; /* base00 */
+	background: #eee8d5; /* base2 */
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #859900; /* green */
+}
+
+.token.function {
+	color: #b58900; /* yellow */
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #cb4b16; /* orange */
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}

example1.html

@@ -9,14 +9,14 @@ <h2>Example data</h2>
     <h3>Example JSON data for a product API</h3>
     <p>An example product in this API is:</p>
 
-<pre class="json">
+<pre><code class="language-json">
 {
     "id": 1,
     "name": "A green door",
     "price": 12.50,
     "tags": ["home", "green"]
 }
-</pre>
+</code></pre>
 
     <p>While generally straightforward, that example leaves some open questions. For example, one may ask:</p>
 
@@ -34,14 +34,14 @@ <h2>Starting the schema</h2>
 <div class="block">
     <p>To start a schema definition, let's begin with a basic JSON schema:</p>
 
-<pre class="json-schema">
+<pre><code class="language-json">
 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product",
     "description": "A product from Acme's catalog",
     "type": "object"
 }
-</pre>
+</code></pre>
 
     <p>The above schema has four properties called <em>keywords</em>.
 
@@ -64,7 +64,7 @@ <h3>What is id?</h3>
     <p><em>id</em> is a numeric value that uniquely identifies a product. Since this is the canonical identifier for a product, it doesn't make sense to have a product without one, so it is required.</p>
 
     <p>In JSON Schema terms, we can update our schema to:</p>
-<pre class="json-schema">
+<pre><code class="language-json">
 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product",
@@ -78,13 +78,13 @@ <h3>What is id?</h3>
     },
     "required": ["id"]
 }
-</pre>
+</code></pre>
 
     <h3>Is name required?</h3>
     <p><em>name</em> is a string value that describes a product. Since there isn't
     much to a product without a name, it also is required. Adding this gives us the schema:</p>
 
-<pre class="json-schema">
+<pre><code class="language-json">
 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product",
@@ -102,12 +102,12 @@ <h3>Is name required?</h3>
     },
     "required": ["id", "name"]
 }
-</pre>
+</code></pre>
 
     <h3>Can price be 0?</h3>
     <p>According to Acme's docs, there are no free products. In JSON schema a number can have a minimum. By default this minimum is inclusive, so we need to specify <em>exclusiveMinimum</em>. Therefore we can update our schema with <em>price</em>:</p>
 
-<pre class="json-schema">
+<pre><code class="language-json">
 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product",
@@ -130,7 +130,7 @@ <h3>Can price be 0?</h3>
     },
     "required": ["id", "name", "price"]
 }
-</pre>
+</code></pre>
 
     <h3>Are all tags strings?</h3>
     <p>Finally, we come to the <em>tags</em> property. Unlike the previous
@@ -148,7 +148,7 @@ <h3>Are all tags strings?</h3>
     <p>The first constraint can be added with <em>minItems</em>, and the second one by
     specifying <em>uniqueItems</em> as being true:</p>
 
-<pre class="json-schema">
+<pre><code class="language-json">
 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product",
@@ -179,7 +179,7 @@ <h3>Are all tags strings?</h3>
     },
     "required": ["id", "name", "price"]
 }
-</pre>
+</code></pre>
 </div>
 
 <h2>Summary</h2>
@@ -189,7 +189,7 @@ <h2>Summary</h2>
     <p>And also, since JSON Schema defines a reference schema for a geographic location, instead of coming up with our own, we'll reference the <a href="http://json-schema.org/geo">canonical one</a>.</p>
 
     <h3>Set of products:</h3>
-<pre class="json">
+<pre><code class="language-json">
 [
     {
         "id": 2,
@@ -221,10 +221,10 @@ <h3>Set of products:</h3>
         }
     }
 ]
-</pre>
+</code></pre>
 
     <h3>Set of products schema:</h3>
-<pre class="json-schema">
+<pre><code class="language-json">
 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "title": "Product set",
@@ -270,6 +270,6 @@ <h3>Set of products schema:</h3>
         "required": ["id", "name", "price"]
     }
 }
-</pre>
+</code></pre>
 </div>