Skip to content
This repository was archived by the owner on Nov 2, 2023. It is now read-only.

Commit ec14c2e

Browse files
RelequestualRelequestual
authored
Merge pull request #52 from mathroc/master
add syntax highlighting for json examples
2 parents 5a38b22 + a032161 commit ec14c2e

File tree

10 files changed

+197
-118
lines changed

10 files changed

+197
-118
lines changed

‎_includes/head.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: full_base_url }}"/>
1212
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: full_base_url }}"/>
1313
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | prepend: full_base_url }}"/>
14-
14+
15+
<script src="{{ "/js/prism.js" | prepend: full_base_url }}" defer async></script>
16+
1517
{% if jekyll.environment == 'production' and site.google_analytics %}
1618
{% include google-analytics.html %}
1719
{% endif %}

‎_sass/minima.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@ $on-laptop: 800px !default;
3939
@import
4040
"minima/base",
4141
"minima/layout",
42-
"minima/syntax-highlighting"
42+
"minima/prism"
4343
;

‎_sass/minima/_base.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@ code {
132132
font-size: 15px;
133133
border: 1px solid $grey-color-light;
134134
border-radius: 3px;
135-
background-color: #eef;
136135
}
137136

138137
code {

‎_sass/minima/_syntax-highlighting.scss

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎_sass/minima/prism.scss

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
/* http://prismjs.com/download.html?themes=prism-solarizedlight&languages=json&plugins=normalize-whitespace */
2+
/*
3+
Solarized Color Schemes originally by Ethan Schoonover
4+
http://ethanschoonover.com/solarized
5+
6+
Ported for PrismJS by Hector Matos
7+
Website: https://krakendev.io
8+
Twitter Handle: https://twitter.com/allonsykraken)
9+
*/
10+
11+
/*
12+
SOLARIZED HEX
13+
--------- -------
14+
base03 #002b36
15+
base02 #073642
16+
base01 #586e75
17+
base00 #657b83
18+
base0 #839496
19+
base1 #93a1a1
20+
base2 #eee8d5
21+
base3 #fdf6e3
22+
yellow #b58900
23+
orange #cb4b16
24+
red #dc322f
25+
magenta #d33682
26+
violet #6c71c4
27+
blue #268bd2
28+
cyan #2aa198
29+
green #859900
30+
*/
31+
32+
code[class*="language-"],
33+
pre[class*="language-"] {
34+
color: #657b83; /* base00 */
35+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
36+
text-align: left;
37+
white-space: pre;
38+
word-spacing: normal;
39+
word-break: normal;
40+
word-wrap: normal;
41+
42+
line-height: 1.5;
43+
44+
-moz-tab-size: 4;
45+
-o-tab-size: 4;
46+
tab-size: 4;
47+
48+
-webkit-hyphens: none;
49+
-moz-hyphens: none;
50+
-ms-hyphens: none;
51+
hyphens: none;
52+
}
53+
54+
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
55+
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
56+
background: #073642; /* base02 */
57+
}
58+
59+
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
60+
code[class*="language-"]::selection, code[class*="language-"] ::selection {
61+
background: #073642; /* base02 */
62+
}
63+
64+
/* Code blocks */
65+
pre[class*="language-"] {
66+
padding: 1em;
67+
margin: .5em 0;
68+
overflow: auto;
69+
border-radius: 0.3em;
70+
}
71+
72+
:not(pre) > code[class*="language-"],
73+
pre[class*="language-"] {
74+
background-color: #fdf6e3; /* base3 */
75+
}
76+
77+
/* Inline code */
78+
:not(pre) > code[class*="language-"] {
79+
padding: .1em;
80+
border-radius: .3em;
81+
}
82+
83+
.token.comment,
84+
.token.prolog,
85+
.token.doctype,
86+
.token.cdata {
87+
color: #93a1a1; /* base1 */
88+
}
89+
90+
.token.punctuation {
91+
color: #586e75; /* base01 */
92+
}
93+
94+
.namespace {
95+
opacity: .7;
96+
}
97+
98+
.token.property,
99+
.token.tag,
100+
.token.boolean,
101+
.token.number,
102+
.token.constant,
103+
.token.symbol,
104+
.token.deleted {
105+
color: #268bd2; /* blue */
106+
}
107+
108+
.token.selector,
109+
.token.attr-name,
110+
.token.string,
111+
.token.char,
112+
.token.builtin,
113+
.token.url,
114+
.token.inserted {
115+
color: #2aa198; /* cyan */
116+
}
117+
118+
.token.entity {
119+
color: #657b83; /* base00 */
120+
background: #eee8d5; /* base2 */
121+
}
122+
123+
.token.atrule,
124+
.token.attr-value,
125+
.token.keyword {
126+
color: #859900; /* green */
127+
}
128+
129+
.token.function {
130+
color: #b58900; /* yellow */
131+
}
132+
133+
.token.regex,
134+
.token.important,
135+
.token.variable {
136+
color: #cb4b16; /* orange */
137+
}
138+
139+
.token.important,
140+
.token.bold {
141+
font-weight: bold;
142+
}
143+
.token.italic {
144+
font-style: italic;
145+
}
146+
147+
.token.entity {
148+
cursor: help;
149+
}

‎example1.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ <h2>Example data</h2>
99
<h3>Example JSON data for a product API</h3>
1010
<p>An example product in this API is:</p>
1111

12-
<pre class="json">
12+
<pre><code class="language-json">
1313
{
1414
"id": 1,
1515
"name": "A green door",
1616
"price": 12.50,
1717
"tags": ["home", "green"]
1818
}
19-
</pre>
19+
</code></pre>
2020

2121
<p>While generally straightforward, that example leaves some open questions. For example, one may ask:</p>
2222

@@ -34,14 +34,14 @@ <h2>Starting the schema</h2>
3434
<div class="block">
3535
<p>To start a schema definition, let's begin with a basic JSON schema:</p>
3636

37-
<pre class="json-schema">
37+
<pre><code class="language-json">
3838
{
3939
"$schema": "http://json-schema.org/draft-04/schema#",
4040
"title": "Product",
4141
"description": "A product from Acme's catalog",
4242
"type": "object"
4343
}
44-
</pre>
44+
</code></pre>
4545

4646
<p>The above schema has four properties called <em>keywords</em>.
4747

@@ -64,7 +64,7 @@ <h3>What is id?</h3>
6464
<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>
6565

6666
<p>In JSON Schema terms, we can update our schema to:</p>
67-
<pre class="json-schema">
67+
<pre><code class="language-json">
6868
{
6969
"$schema": "http://json-schema.org/draft-04/schema#",
7070
"title": "Product",
@@ -78,13 +78,13 @@ <h3>What is id?</h3>
7878
},
7979
"required": ["id"]
8080
}
81-
</pre>
81+
</code></pre>
8282

8383
<h3>Is name required?</h3>
8484
<p><em>name</em> is a string value that describes a product. Since there isn't
8585
much to a product without a name, it also is required. Adding this gives us the schema:</p>
8686

87-
<pre class="json-schema">
87+
<pre><code class="language-json">
8888
{
8989
"$schema": "http://json-schema.org/draft-04/schema#",
9090
"title": "Product",
@@ -102,12 +102,12 @@ <h3>Is name required?</h3>
102102
},
103103
"required": ["id", "name"]
104104
}
105-
</pre>
105+
</code></pre>
106106

107107
<h3>Can price be 0?</h3>
108108
<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>
109109

110-
<pre class="json-schema">
110+
<pre><code class="language-json">
111111
{
112112
"$schema": "http://json-schema.org/draft-04/schema#",
113113
"title": "Product",
@@ -130,7 +130,7 @@ <h3>Can price be 0?</h3>
130130
},
131131
"required": ["id", "name", "price"]
132132
}
133-
</pre>
133+
</code></pre>
134134

135135
<h3>Are all tags strings?</h3>
136136
<p>Finally, we come to the <em>tags</em> property. Unlike the previous
@@ -148,7 +148,7 @@ <h3>Are all tags strings?</h3>
148148
<p>The first constraint can be added with <em>minItems</em>, and the second one by
149149
specifying <em>uniqueItems</em> as being true:</p>
150150

151-
<pre class="json-schema">
151+
<pre><code class="language-json">
152152
{
153153
"$schema": "http://json-schema.org/draft-04/schema#",
154154
"title": "Product",
@@ -179,7 +179,7 @@ <h3>Are all tags strings?</h3>
179179
},
180180
"required": ["id", "name", "price"]
181181
}
182-
</pre>
182+
</code></pre>
183183
</div>
184184

185185
<h2>Summary</h2>
@@ -189,7 +189,7 @@ <h2>Summary</h2>
189189
<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>
190190

191191
<h3>Set of products:</h3>
192-
<pre class="json">
192+
<pre><code class="language-json">
193193
[
194194
{
195195
"id": 2,
@@ -221,10 +221,10 @@ <h3>Set of products:</h3>
221221
}
222222
}
223223
]
224-
</pre>
224+
</code></pre>
225225

226226
<h3>Set of products schema:</h3>
227-
<pre class="json-schema">
227+
<pre><code class="language-json">
228228
{
229229
"$schema": "http://json-schema.org/draft-04/schema#",
230230
"title": "Product set",
@@ -270,6 +270,6 @@ <h3>Set of products schema:</h3>
270270
"required": ["id", "name", "price"]
271271
}
272272
}
273-
</pre>
273+
</code></pre>
274274
</div>
275275

0 commit comments

Comments
 (0)