Added highlight.js syntax highlighting to dashboard json results

mkuehn · Sep 11, 2014 · 2b08336 · 2b08336
1 parent 44aedac
commit 2b08336
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 4 deletions.
diff --git a/dashboard/dash.js b/dashboard/dash.js
@@ -107,10 +107,21 @@ $(function(){
 			if (headers['Content-Type'].indexOf('application/json') > -1 || headers['Content-Type'].indexOf('text/json') > -1){
 				//indentation!
 				if (body.length){
-					body = JSON.stringify( JSON.parse(body), null, 3 )
-							 .split('\n')
-							 .join('<br/>')
-							 .replace(/\s/g,'&nbsp;');
+					body = JSON.stringify(JSON.parse(body), null, 3);
+					// only do syntax highlighting if hljs is defined
+					if (typeof hljs === 'undefined') {
+						body = body.split('\n')
+								   .join('<br/>')
+								   .replace(/\s/g,'&nbsp;');
+					} else {
+						// syntax highlight json and then replace spaces at the start of each line (or after <br/>) with &nbsp;
+						body = hljs.highlight("json", body).value;
+						body = body.split('\n')
+								   .join('<br/>')
+								   .replace(/(\<br\/\>)(\s+)/g, function(match, p1, p2, offset, string){
+										return [p1, p2.replace(/\s/g,'&nbsp;')].join('');
+									});
+					}
 				}
 			}
 

diff --git a/dashboard/dashboard.cfm b/dashboard/dashboard.cfm
@@ -5,6 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<style>
 		<cfinclude template="dash.css" />
+		<cfinclude template="highlight-github.min.css" />
 	</style>
 </head>
 <body>
@@ -419,9 +420,12 @@
 	<script type="text/javascript">
 		<cfinclude template="jquery.min.js" />
 		<cfinclude template="bootstrap.min.js" />
+		<cfinclude template="highlight.min.js" />
 		<cfinclude template="dash.js" />
 
 		$(function(){
+			hljs.initHighlighting();
+
 			var baseurl = '<cfoutput>#cgi.script_name#?dashboard</cfoutput>';
 			$("#reload").click(function(){
 				var reloadUrl = baseurl + '<cfoutput>&#application._taffy.settings.reloadKey#=#application._taffy.settings.reloadPassword#</cfoutput>';

diff --git a/dashboard/highlight-github.min.css b/dashboard/highlight-github.min.css
@@ -0,0 +1,31 @@
+/*
+github.com style (c) Vasily Polovnyov <[email protected]>
+
+highlight.js v8.2
+
+Copyright (c) 2006, Ivan Sagalaev
+All rights reserved.
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of highlight.js nor the names of its contributors
+      may be used to endorse or promote products derived from this software
+      without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY
+EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+.hljs{display:block;overflow-x:auto;padding:.5em;color:#333;background:#f8f8f8;-webkit-text-size-adjust:none}.hljs-comment,.hljs-template_comment,.diff .hljs-header,.hljs-javadoc{color:#998;font-style:italic}.hljs-keyword,.css .rule .hljs-keyword,.hljs-winutils,.javascript .hljs-title,.nginx .hljs-title,.hljs-subst,.hljs-request,.hljs-status{color:#333;font-weight:bold}.hljs-number,.hljs-hexcolor,.ruby .hljs-constant{color:#008080}.hljs-string,.hljs-tag .hljs-value,.hljs-phpdoc,.hljs-dartdoc,.tex .hljs-formula{color:#d14}.hljs-title,.hljs-id,.scss .hljs-preprocessor{color:#900;font-weight:bold}.javascript .hljs-title,.hljs-list .hljs-keyword,.hljs-subst{font-weight:normal}.hljs-class .hljs-title,.hljs-type,.vhdl .hljs-literal,.tex .hljs-command{color:#458;font-weight:bold}.hljs-tag,.hljs-tag .hljs-title,.hljs-rules .hljs-property,.django .hljs-tag .hljs-keyword{color:#000080;font-weight:normal}.hljs-attribute,.hljs-variable,.lisp .hljs-body{color:#008080}.hljs-regexp{color:#009926}.hljs-symbol,.ruby .hljs-symbol .hljs-string,.lisp .hljs-keyword,.clojure .hljs-keyword,.scheme .hljs-keyword,.tex .hljs-special,.hljs-prompt{color:#990073}.hljs-built_in{color:#0086b3}.hljs-preprocessor,.hljs-pragma,.hljs-pi,.hljs-doctype,.hljs-shebang,.hljs-cdata{color:#999;font-weight:bold}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.diff .hljs-change{background:#0086b3}.hljs-chunk{color:#aaa}
diff --git a/dashboard/highlight.min.js b/dashboard/highlight.min.js