Skip to content

Commit d8485e4

Browse files
geraintluffgeraintluff
committed
Added custom highlighting code
1 parent 85f8eb0 commit d8485e4

File tree

4 files changed

+531
-9
lines changed

4 files changed

+531
-9
lines changed

‎examples.html‎

Lines changed: 174 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<title></title>
55
<link href="lib/bootstrap-min.css" rel="stylesheet">
6+
<link rel="stylesheet" href="lib/json-highlight.css"></link>
67
</head>
78
<body>
89
<div class="container">
@@ -23,7 +24,14 @@ <h2>JSON Schema by example</h2>
2324
<h3>Example JSON data for a product API</h3>
2425
<p>An example product in this API is:</p>
2526

26-
<script src="https://gist.github.com/4460710.js"></script>
27+
<pre class="json">
28+
{
29+
"id": 1,
30+
"name": "A green door",
31+
"price": 12.50,
32+
"tags": ["home", "green"]
33+
}
34+
</pre>
2735

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

@@ -38,7 +46,13 @@ <h3>Example JSON data for a product API</h3>
3846
<h3>Example schema for the product API</h3>
3947
<p>To start a schema definition, let's begin with a basic to JSON schema.</p>
4048

41-
<script src="https://gist.github.com/4460744.js"></script>
49+
<pre class="json-schema">
50+
{
51+
"title": "Product",
52+
"description": "A product from Acme's catalog",
53+
"type": "object"
54+
}
55+
</pre>
4256

4357
<p>The above schema has a <em>description</em> saying we are going to describe a product, a <em>type</em> saying our product is a JSON object (versus a simple datapoint like a string/number), and a <em>properties</em>section for describing the data in that object.</p>
4458

@@ -48,22 +62,98 @@ <h4>What is id?</h4>
4862
<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>
4963

5064
<p>In JSON Schema terms, we can update our schema to:</p>
51-
<script src="https://gist.github.com/4460750.js"></script>
65+
<pre class="json-schema">
66+
{
67+
"title": "Product",
68+
"type": "object",
69+
"properties": {
70+
"id": {
71+
"description": "The unique identifier for a product",
72+
"type": "integer"
73+
}
74+
},
75+
"required": ["id"]
76+
}
77+
</pre>
5278

5379
<h4>Is name required?</h4>
5480
<p><em>name</em> is a string value that describes a product. Since there isn't much to a product, it also is required. Adding this gives us the schema:</p>
5581

56-
<script src="https://gist.github.com/4460756.js"></script>
82+
<pre class="json-schema">
83+
{
84+
"title": "Product",
85+
"type": "object",
86+
"properties": {
87+
"id": {
88+
"description": "The unique identifier for a product",
89+
"type": "integer"
90+
},
91+
"name": {
92+
"description": "Name of the product",
93+
"type": "string"
94+
}
95+
},
96+
"required": ["id", "name"]
97+
}
98+
</pre>
5799

58100
<h4>Can price be 0?</h4>
59101
<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>
60102

61-
<script src="https://gist.github.com/4460762.js"></script>
103+
<pre class="json-schema">
104+
{
105+
"title": "Product",
106+
"type": "object",
107+
"properties": {
108+
"id": {
109+
"description": "The unique identifier for a product",
110+
"type": "integer"
111+
},
112+
"name": {
113+
"description": "Name of the product",
114+
"type": "string"
115+
},
116+
"price": {
117+
"type": "number",
118+
"minimum": 0,
119+
"exclusiveMinimum": true
120+
}
121+
},
122+
"required": ["id", "name", "price"]
123+
}
124+
</pre>
62125

63126
<h4>Are all tags strings?</h4>
64127
<p>Finally, we come to the tags property. Unlike the previous properties, tags have many values, and is represented as a JSON array. According to Acme's docs, all tags must be strings, but you aren't required to specify tags. We simply leave <em>tags</em> out of the list of required properties, giving us:</p>
65128

66-
<script src="https://gist.github.com/4460767.js"></script>
129+
<pre class="json-schema">
130+
{
131+
"title": "Product",
132+
"type": "object",
133+
"properties": {
134+
"id": {
135+
"description": "The unique identifier for a product",
136+
"type": "integer"
137+
},
138+
"name": {
139+
"description": "Name of the product",
140+
"type": "string"
141+
},
142+
"price": {
143+
"type": "number",
144+
"minimum": 0,
145+
"exclusiveMinimum": true
146+
},
147+
"tags": {
148+
"type": "array",
149+
"items": {
150+
"type": "string"
151+
}
152+
}
153+
},
154+
"required": ["id", "name", "price"]
155+
}
156+
</pre>
67157

68158
<h3>Example summary</h3>
69159
<p>The above example is by no means definitive of all the types of data JSON schema can define. For more definitive information see the <a href="#definitions">full standard draft</a>.</p>
@@ -73,15 +163,91 @@ <h3>Example summary</h3>
73163
<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>
74164

75165
<h4>Set of products:</h4>
76-
<script src="https://gist.github.com/4460776.js"></script>
166+
<pre class="json">
167+
[
168+
{
169+
"id": 2,
170+
"name": "An ice sculpture",
171+
"price": 12.50,
172+
"tags": ["cold", "ice"],
173+
"dimensions": {
174+
"length": 7.0,
175+
"width": 12.0,
176+
"height": 9.5
177+
},
178+
"warehouseLocation": {
179+
"latitude": -78.75,
180+
"longitude": 20.4
181+
}
182+
},
183+
{
184+
"id": 3,
185+
"name": "A blue mouse",
186+
"price": 25.50,
187+
"dimensions": {
188+
"length": 3.1,
189+
"width": 1.0,
190+
"height": 1.0
191+
},
192+
"warehouseLocation": {
193+
"latitude": 54.4,
194+
"longitude": -32.7
195+
}
196+
}
197+
]
198+
</pre>
77199

78200
<h4>Set of products schema:</h4>
79201

80-
<script src="https://gist.github.com/4460778.js"></script>
202+
<pre class="json-schema">
203+
{
204+
"title": "Product set",
205+
"type": "array",
206+
"items": {
207+
"title": "Product",
208+
"type": "object",
209+
"properties": {
210+
"id": {
211+
"description": "The unique identifier for a product",
212+
"type": "number"
213+
},
214+
"name": {
215+
"type": "string"
216+
},
217+
"price": {
218+
"type": "number",
219+
"minimum": 0,
220+
"exclusiveMinimum": true
221+
},
222+
"tags": {
223+
"type": "array",
224+
"items": {
225+
"type": "string"
226+
}
227+
},
228+
"dimensions": {
229+
"type": "object",
230+
"properties": {
231+
"length": {"type": "number"},
232+
"width": {"type": "number"},
233+
"height": {"type": "number"}
234+
},
235+
"required": ["length", "width", "height"]
236+
},
237+
"warehouseLocation": {
238+
"description": "Co-ordinates of the warehouse with the product",
239+
"$ref": "http://json-schema.org/geo"
240+
}
241+
},
242+
"required": ["id", "name", "price"]
243+
}
244+
}
245+
</pre>
81246

82247
</div>
83248
</div>
84249
</div>
85250

251+
<script src="lib/json-highlight.js"></script>
86252
</body>
87253
</html>

‎index.html‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
})();
1818

1919
</script>
20+
<link rel="stylesheet" href="lib/json-highlight.css"></link>
2021
</head>
2122
<body>
2223
<div class="container">
@@ -48,7 +49,26 @@ <h2>JSON Schema by example</h2>
4849

4950
<p>Here is a basic example of a JSON Schema:
5051

51-
<script src="https://gist.github.com/4460727.js"></script>
52+
<pre class="json-schema">
53+
{
54+
"title": "Example Schema",
55+
"type": "object",
56+
"properties": {
57+
"firstName": {
58+
"type": "string"
59+
},
60+
"lastName": {
61+
"type": "string"
62+
},
63+
"age": {
64+
"description": "Age in years",
65+
"type": "integer",
66+
"minimum": 0
67+
}
68+
},
69+
"required": ["firstName", "lastName"]
70+
}
71+
</pre>
5272

5373
<p>For more examples, see the <a href="examples.html">examples page</a>.</p>
5474

@@ -110,5 +130,6 @@ <h2>Reference schemas</h2>
110130
</div>
111131
</div>
112132
</div>
133+
<script src="lib/json-highlight.js"></script>
113134
</body>
114135
</html>

‎lib/json-highlight.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.json, .json-schema {
2+
background-color: #F4F4E8;
3+
border: 1px solid #888;
4+
border-radius: 5px;
5+
padding: 0.5em;
6+
font-family: Consolas, "Liberation Mono", Courier, monospace;
7+
font-size: 13px;
8+
}
9+
10+
.json-punctuation {
11+
font-weight: bold;
12+
}
13+
14+
.json-null, .json-true, .json-false {
15+
font-weight: bold;
16+
}
17+
18+
.json-true {
19+
color: #080;
20+
}
21+
22+
.json-false {
23+
color: #800;
24+
}
25+
26+
.json-object-key {
27+
color: #246;
28+
}
29+
30+
.json-keyword {
31+
font-weight: bold;
32+
color: #036;
33+
}
34+
35+
.json-number {
36+
font-weight: bold;
37+
color: #660;
38+
}
39+
40+
.json-string {
41+
color: #800;
42+
}
43+
44+
.json-schema-map > .json-object-key {
45+
color: #080;
46+
font-style: italic;
47+
}
48+

0 commit comments

Comments
 (0)