-
Notifications
You must be signed in to change notification settings - Fork 79
/
index.html
102 lines (80 loc) · 3.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>json.human.js - Json Formatting for Human Beings</title>
<link rel="stylesheet" media="all" href="css/demo.css" />
<link rel="stylesheet" media="all" href="css/json.human.css" />
<link rel="stylesheet" media="all" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.css" />
</head>
<body>
<h1>json.human.js: Json Formatting for Human Beings</h1>
<p class="project-description">Provide JSON and get a DOM node with
a human representation of that JSON.</p>
<h2>Why?</h2>
<p>At <a href="http://event-fabric.com">Event Fabric</a> we need to display JSON to people from all technical levels without being too technical but also without losing information about the underlying JSON object.</p>
<h2>How?</h2>
<p>you can see <a href="https://github.com/marianoguerra/json.human.js/blob/master/js/demo.js">js/demo.js</a> in the <a href="http://github.com/marianoguerra/json.human.js">repo</a> for an example, here is a short one</p>
<pre>
var node = JsonHuman.format(input);
output.appendChild(node);
</pre>
<h2>Try it</h2>
<p>edit the JSON and click <em>Convert</em></p>
<h2>Input: JSON</h2>
<textarea id="input">{
"name": "json.human",
"description": "Convert\n JSON to human readable\r HTML",
"author": "Mariano Guerra <mariano@marianoguerra.org>",
"tags": ["DOM", "HTML", "JSON", "Pretty Print"],
"version": "0.1.0",
"main": "json.human.js",
"license" : "MIT",
"dependencies": {
"crel": "1.0.0"
},
"repository": {
"type": "git",
"url": "git://github.com/marianoguerra/json.human.js.git"
},
"bugs": {
"url": "http://github.com/marianoguerra/json.human.js/issues"
},
"contributors": [],
"config": {
"what?": "this object is just to show some extra stuff",
"how?": ["add json.human.js", "add json.human.css", "???", "profit!"],
"customization?": ["customize the css prefix", "change the css file"],
"integer": 42,
"float": 12.3,
"bool": true,
"emptyString": "",
"emptyArray": [],
"emptyObject": {},
"htmlEntities": " <- trailing <em> & </em> and some html "
}
}
</textarea>
<div class="buttons">
<button id="convert">Convert</button>
</div>
<h2>Time</h2>
<p>Format Time: <span id="format-time"></span></p>
<p>Render Time: <span id="render-time"></span></p>
<h2>Output: HTML</h2>
<div id="output">
</div>
<h2>Raw HTML</h2>
<textarea id="output-raw" style="width: 100%; height: 20em;">
</textarea>
<h2>License?</h2>
<p><a href="http://opensource.org/licenses/MIT">MIT</a></p>
<h2>Alternatives</h2>
<ul>
<li><a href="https://github.com/padolsey/prettyPrint.js">prettyprint.js</a></li>
</ul>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/mode/javascript/javascript.min.js" data-main="js/demo"></script>
<script src="lib/require.js" data-main="js/demo"></script>
</body>
</html>