Adding syntax highlight to JSON snippets and responses.

src/main/coffeescript/view/OperationView.coffee

@@ -116,7 +116,7 @@ class OperationView extends Backbone.View
   # puts the response data in UI
   showStatus: (data) ->
     try
-      response_body = "<pre>" + JSON.stringify(JSON.parse(data.responseText), null, 2).replace(/\n/g, "<br>") + "</pre>"
+      response_body = '<pre class="json"><code>' + JSON.stringify(JSON.parse(data.responseText), null, 2) + "</code></pre>"
     catch error
       response_body = "<span style='color:red'>&nbsp;&nbsp;&nbsp;[unable to parse as json; raw response below]</span><br><pre>" + data.responseText + "</pre>"
     $(".response_code", $(@el)).html "<pre>" + data.status + "</pre>"
@@ -125,6 +125,7 @@ class OperationView extends Backbone.View
     $(".response", $(@el)).slideDown()
     $(".response_hider", $(@el)).show()
     $(".response_throbber", $(@el)).hide()
+    hljs.highlightBlock($('.response_body', $(@el))[0])
 
   toggleOperationContent: ->
     elem = $('#' + @model.resourceName + "_" + @model.nickname + "_" + @model.httpMethod + "_content");

src/main/html/css/hightlight.default.css

@@ -0,0 +1,135 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  background: #F0F0F0;
+}
+
+pre code,
+pre .subst,
+pre .tag .title,
+pre .lisp .title,
+pre .clojure .built_in,
+pre .nginx .title {
+  color: black;
+}
+
+pre .string,
+pre .title,
+pre .constant,
+pre .parent,
+pre .tag .value,
+pre .rules .value,
+pre .rules .value .number,
+pre .preprocessor,
+pre .ruby .symbol,
+pre .ruby .symbol .string,
+pre .aggregate,
+pre .template_tag,
+pre .django .variable,
+pre .smalltalk .class,
+pre .addition,
+pre .flow,
+pre .stream,
+pre .bash .variable,
+pre .apache .tag,
+pre .apache .cbracket,
+pre .tex .command,
+pre .tex .special,
+pre .erlang_repl .function_or_atom,
+pre .markdown .header {
+  color: #800;
+}
+
+pre .comment,
+pre .annotation,
+pre .template_comment,
+pre .diff .header,
+pre .chunk,
+pre .markdown .blockquote {
+  color: #888;
+}
+
+pre .number,
+pre .date,
+pre .regexp,
+pre .literal,
+pre .smalltalk .symbol,
+pre .smalltalk .char,
+pre .go .constant,
+pre .change,
+pre .markdown .bullet,
+pre .markdown .link_url {
+  color: #080;
+}
+
+pre .label,
+pre .javadoc,
+pre .ruby .string,
+pre .decorator,
+pre .filter .argument,
+pre .localvars,
+pre .array,
+pre .attr_selector,
+pre .important,
+pre .pseudo,
+pre .pi,
+pre .doctype,
+pre .deletion,
+pre .envvar,
+pre .shebang,
+pre .apache .sqbracket,
+pre .nginx .built_in,
+pre .tex .formula,
+pre .erlang_repl .reserved,
+pre .prompt,
+pre .markdown .link_label,
+pre .vhdl .attribute,
+pre .clojure .attribute,
+pre .coffeescript .property {
+  color: #88F
+}
+
+pre .keyword,
+pre .id,
+pre .phpdoc,
+pre .title,
+pre .built_in,
+pre .aggregate,
+pre .css .tag,
+pre .javadoctag,
+pre .phpdoc,
+pre .yardoctag,
+pre .smalltalk .class,
+pre .winutils,
+pre .bash .variable,
+pre .apache .tag,
+pre .go .typename,
+pre .tex .command,
+pre .markdown .strong,
+pre .request,
+pre .status {
+  font-weight: bold;
+}
+
+pre .markdown .emphasis {
+  font-style: italic;
+}
+
+pre .nginx .built_in {
+  font-weight: normal;
+}
+
+pre .coffeescript .javascript,
+pre .javascript .xml,
+pre .tex .formula,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .xml .css,
+pre .xml .cdata {
+  opacity: 0.5;
+}

src/main/html/css/screen.css

@@ -1509,13 +1509,12 @@ body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operatio
     font-size: 1em;
     line-height: 1.5em;
 }
-.model-signature span {
+.model-signature .description span {
     font-size: 0.9em;
     line-height: 1.5em;
 }
-.model-signature span:nth-child(odd)    { color:#333; }
-.model-signature span:nth-child(even)    { color:#C5862B; }
-
+.model-signature .description span:nth-child(odd)    { color:#333; }
+.model-signature .description span:nth-child(even)    { color:#C5862B; }
 .model-signature .signature-nav a {
     text-decoration: none;
     color: #AAA;
@@ -1576,3 +1575,7 @@ body ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operatio
     padding-right: 0;
     border-right: none;
 }
+
+pre code {
+  background: none;
+}

src/main/html/index.html

@@ -2,6 +2,7 @@
 <head>
     <title>Swagger UI</title>
     <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
+    <link href='css/hightlight.default.css' media='screen' rel='stylesheet' type='text/css'/>
     <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
     <script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
     <script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
@@ -12,6 +13,7 @@
     <script src='lib/backbone-min.js' type='text/javascript'></script>
     <script src='lib/swagger.js' type='text/javascript'></script>
     <script src='swagger-ui.js' type='text/javascript'></script>
+    <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
 
     <style type="text/css">
         .swagger-ui-wrap {
@@ -53,6 +55,7 @@
                         console.log(swaggerApi);
                         console.log(swaggerUi);
                     }
+                  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
                 },
                 onFailure: function(data) {
                 	if(console) {

src/main/template/signature.handlebars

@@ -11,7 +11,7 @@
     </div>
 
     <div class="snippet">
-        <pre>{{{sampleJSON}}}</pre>
+        <pre><code>{{sampleJSON}}</code></pre>
         <small>Click to set as parameter value</small>
     </div>
 </div>