0.1.0

README.md

@@ -0,0 +1,26 @@
+# markupify
+
+Highlight your JSON with html markup
+
+	npm install markupify
+
+Markupify will take a JSON document and add markup to it so it can be styled in a browser.
+
+``` js
+var markupify = require('markupify');
+
+var html = markupify({hello:'world'});
+
+console.log(html);
+```
+
+The above example will print the following html
+
+``` html
+<div class="markupify">{
+	<span class="key">hello:</span> <span class="string">"world"</span>
+}</div>
+```
+
+Afterwards you can use css to style your output to your liking.
+A stylesheet similar to [JSON view](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc) is included in [style.css](https://github.com/mafintosh/markupify/)

index.js

@@ -1,3 +1,5 @@
+var INDENT = '    ';
+
 var type = function(doc) {
 	if (doc === 'null') return 'null';
 	if (Array.isArray(doc)) return 'array';
@@ -18,11 +20,11 @@ module.exports = function(doc) {
 
 		var out = start+'\n';
 
-		indent += '    ';
+		indent += INDENT;
 		list.forEach(function(key, i) {
 			out += indent+fn(key)+(i < list.length-1 ? ',' : '')+'\n';
 		});
-		indent = indent.slice(0, -4);
+		indent = indent.slice(0, -INDENT.length);
 
 		return out + indent+end;
 	};
@@ -62,5 +64,5 @@ module.exports = function(doc) {
 		return '';
 	};
 
-	return '<pre class="htmlify">'+visit(doc)+'</pre>';
+	return '<div class="markupify">'+visit(doc)+'</div>';
 };

package.json

@@ -0,0 +1,8 @@
+{
+ "name":"markupify",
+ "version":"0.1.0",
+ "repository": "git://github.com/mafintosh/markupify",
+ "description":"a json to html syntax highlighter",
+ "keywords": ["json", "html", "syntax", "highlight"],
+ "author": "Mathias Buus Madsen <[email protected]>"
+}

style.css

@@ -0,0 +1,21 @@
+.markupify {
+	line-height: 17px;
+	font-size: 13px;
+	font-family: monospace;
+	white-space: pre;
+}
+.markupify .key {
+	font-weight: bold;
+}
+.markupify .bool {
+	color: firebrick;
+}
+.markupify .string {
+	color: green;
+}
+.markupify .null {
+	color: gray;
+}
+.markupify .number {
+	color: blue;
+}