simple js syntax highlighting

ckan · Sep 22, 2012 · 1eaa73e · 1eaa73e
1 parent 955faa9
commit 1eaa73e
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 3 deletions.
diff --git a/ckan/public/base/datapreview/css/jsonpreview.css b/ckan/public/base/datapreview/css/jsonpreview.css
@@ -0,0 +1,24 @@
+body {
+	width: 500px;
+}
+
+pre {
+	font-size: 13px;
+}
+
+.string {
+	color: #009900;
+}
+.number {
+	color: #0066FF;
+}
+.boolean {
+	color: #E62E00;
+}
+.null {
+	color: #E62E00;
+}
+.key {
+	color: #222;
+	font-weight: bold;
+}
diff --git a/ckan/public/base/datapreview/jsonpreview.js b/ckan/public/base/datapreview/jsonpreview.js
@@ -1,11 +1,35 @@
 // json preview module
-ckan.module('jsonpreview', function (jQuery, _) {
+ckan.module('jsonpreview', function (jQuery) {
   return {
     initialize: function () {
       var self = this;
       $.getJSON(preload_resource['url'], function(data) {
         var html = JSON.stringify(data, null, 4);
-        $(self.el).html(html);
+        var pretty = self._syntaxHighlight(html);
+        $(self.el).html(pretty);
+      });
+    },
+
+    // from: http://stackoverflow.com/a/7220510/214950
+    _syntaxHighlight: function(json) {
+      if (typeof json != 'string') {
+        json = JSON.stringify(json, undefined, 2);
+      }
+      json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        var cls = 'number';
+        if (/^"/.test(match)) {
+          if (/:$/.test(match)) {
+            cls = 'key';
+          } else {
+            cls = 'string';
+          }
+        } else if (/true|false/.test(match)) {
+          cls = 'boolean';
+        } else if (/null/.test(match)) {
+          cls = 'null';
+        }
+        return '<span class="' + cls + '">' + match + '</span>';
       });
     }
   };

diff --git a/ckan/public/base/datapreview/resource.config b/ckan/public/base/datapreview/resource.config
@@ -59,3 +59,5 @@ pdfpreview =
 
 jsonpreview =
     jsonpreview.js
+
+    css/jsonpreview.css
diff --git a/ckan/public/base/javascript/modules/data-viewer.js b/ckan/public/base/javascript/modules/data-viewer.js
@@ -1,6 +1,6 @@
 // data viewer module
 // resizes the iframe when the content is loaded
-this.ckan.module('data-viewer', function (jQuery, _) {
+this.ckan.module('data-viewer', function (jQuery) {
   return {
     initialize: function () {
       jQuery.proxyAll(this, /_on/);