Skip to content

Commit d37a8e0

Browse files
mathrocmathroc
committed
add syntax highlighting for json examples
closes json-schema-org#49
1 parent 9ab4e95 commit d37a8e0

File tree

10 files changed

+187
-118
lines changed

10 files changed

+187
-118
lines changed

‎_includes/head.html

+3-1
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

+1-1
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

-1
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

-71
This file was deleted.

‎_sass/minima/prism.scss

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/* http://prismjs.com/download.html?themes=prism&languages=json&plugins=normalize-whitespace */
2+
/**
3+
* prism.js default theme for JavaScript, CSS and HTML
4+
* Based on dabblet (http://dabblet.com)
5+
* @author Lea Verou
6+
*/
7+
8+
code[class*="language-"],
9+
pre[class*="language-"] {
10+
color: black;
11+
background: none;
12+
text-shadow: 0 1px white;
13+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
text-align: left;
15+
white-space: pre;
16+
word-spacing: normal;
17+
word-break: normal;
18+
word-wrap: normal;
19+
line-height: 1.5;
20+
21+
-moz-tab-size: 4;
22+
-o-tab-size: 4;
23+
tab-size: 4;
24+
25+
-webkit-hyphens: none;
26+
-moz-hyphens: none;
27+
-ms-hyphens: none;
28+
hyphens: none;
29+
}
30+
31+
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
32+
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
33+
text-shadow: none;
34+
background: #b3d4fc;
35+
}
36+
37+
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
38+
code[class*="language-"]::selection, code[class*="language-"] ::selection {
39+
text-shadow: none;
40+
background: #b3d4fc;
41+
}
42+
43+
@media print {
44+
code[class*="language-"],
45+
pre[class*="language-"] {
46+
text-shadow: none;
47+
}
48+
}
49+
50+
/* Code blocks */
51+
pre[class*="language-"] {
52+
padding: 1em;
53+
margin: .5em 0;
54+
overflow: auto;
55+
}
56+
57+
:not(pre) > code[class*="language-"],
58+
pre[class*="language-"] {
59+
background: #f5f2f0;
60+
}
61+
62+
/* Inline code */
63+
:not(pre) > code[class*="language-"] {
64+
padding: .1em;
65+
border-radius: .3em;
66+
white-space: normal;
67+
}
68+
69+
.token.comment,
70+
.token.prolog,
71+
.token.doctype,
72+
.token.cdata {
73+
color: slategray;
74+
}
75+
76+
.token.punctuation {
77+
color: #999;
78+
}
79+
80+
.namespace {
81+
opacity: .7;
82+
}
83+
84+
.token.property,
85+
.token.tag,
86+
.token.boolean,
87+
.token.number,
88+
.token.constant,
89+
.token.symbol,
90+
.token.deleted {
91+
color: #905;
92+
}
93+
94+
.token.selector,
95+
.token.attr-name,
96+
.token.string,
97+
.token.char,
98+
.token.builtin,
99+
.token.inserted {
100+
color: #690;
101+
}
102+
103+
.token.operator,
104+
.token.entity,
105+
.token.url,
106+
.language-css .token.string,
107+
.style .token.string {
108+
color: #a67f59;
109+
background: hsla(0, 0%, 100%, .5);
110+
}
111+
112+
.token.atrule,
113+
.token.attr-value,
114+
.token.keyword {
115+
color: #07a;
116+
}
117+
118+
.token.function {
119+
color: #DD4A68;
120+
}
121+
122+
.token.regex,
123+
.token.important,
124+
.token.variable {
125+
color: #e90;
126+
}
127+
128+
.token.important,
129+
.token.bold {
130+
font-weight: bold;
131+
}
132+
.token.italic {
133+
font-style: italic;
134+
}
135+
136+
.token.entity {
137+
cursor: help;
138+
}
139+

‎example1.html

+16-16
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)