Do the code highlighting where the bodies are processed.

This fixes an issue where highlight.js was removing a bound element
out from underneath angular, which breaks the updates of the body
elements for requests and responses.

Fixes issue #8.

assets/client/page.html

@@ -8,6 +8,7 @@
         <script src="/static/js/jquery-1.9.1.min.js"></script>
         <script src="/static/js/jquery.timeago.js"></script>
         <script src="/static/js/angular.js"></script>
+        <script src="/static/js/angular-sanitize.min.js"></script>
         <script src="/static/js/base64.js"></script>
         <script src="/static/js/ngrok.js"></script>
         <script type="text/javascript">
@@ -18,8 +19,8 @@
             table.params { font-size: 12px; font-family: Courier, monospace; }
             .txn-selector tr { cursor: pointer; }
             .txn-selector tr:hover { background-color: #ddd; }
-            tr.selected, tr.selected:hover { 
-                background-color: #ff9999; 
+            tr.selected, tr.selected:hover {
+                background-color: #ff9999;
                 background-color: #000000;
                 color:white;
 
@@ -70,11 +71,11 @@
                             </span>
                         </div>
                         <div class="span4">
-                            <i class="icon-time"></i> Duration 
+                            <i class="icon-time"></i> Duration
                             <span style="margin-left: 8px;" class="muted">{{Txn.Duration}}</span>
                         </div>
                         <div  class="span4">
-                            <i class="icon-user"></i> IP 
+                            <i class="icon-user"></i> IP
                             <span style="margin-left: 8px;" class="muted">{{Txn.Req.Header['X-Real-Ip'][0]}}</span>
                         </div>
                     </div>

assets/client/static/js/ngrok.js

@@ -1,4 +1,4 @@
-var ngrok = angular.module("ngrok", []);
+var ngrok = angular.module("ngrok", ["ngSanitize"]);
 
 var hexRepr = function(bytes) {
     var buf = [];
@@ -47,7 +47,7 @@ ngrok.factory("txnSvc", function() {
         body.exists = body.Length > 0;
         body.hasError = !!body.Error;
 
-        body.syntaxClass = {
+        var syntaxClass = {
             "text/xml":               "xml",
             "application/xml":        "xml",
             "text/html":              "xml",
@@ -63,12 +63,12 @@ ngrok.factory("txnSvc", function() {
         } else {
             body.Text = Base64.decode(body.Text).text;
         }
-        
+
         // prettify
         var transform = {
             "xml": "xml",
             "json": "json"
-        }[body.syntaxClass];
+        }[syntaxClass];
 
         if (!body.hasError && !!transform) {
             try {
@@ -79,6 +79,13 @@ ngrok.factory("txnSvc", function() {
             } catch (e) {
             }
         }
+
+        if (!!syntaxClass) {
+            body.Text = hljs.highlight(syntaxClass, body.Text).value;
+        } else {
+            // highlight.js doesn't have a 'plaintext' syntax, so we'll just copy its escaping function.
+            body.Text = body.Text.replace(/&/gm, '&amp;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;');
+        }
     };
 
     var processReq = function(req) {
@@ -214,7 +221,7 @@ ngrok.directive({
                 "onbtnclick": "&"
             },
             replace: true,
-            template: '' + 
+            template: '' +
             '<ul class="nav nav-pills">' +
                 '<li ng-repeat="tab in tabNames" ng-class="{\'active\': isTab(tab)}">' +
                     '<a href="" ng-click="setTab(tab)">{{tab}}</a>' +
@@ -247,7 +254,7 @@ ngrok.directive({
             '</h6>' +
 '' +
             '<div ng-show="!body.isForm && !body.binary">' +
-                '<pre ng-show="body.exists"><code ng-class="body.syntaxClass">{{ body.Text }}</code></pre>' +
+                '<pre ng-show="body.exists"><code ng-bind-html="body.Text"></code></pre>' +
             '</div>' +
 '' +
             '<div ng-show="body.isForm">' +
@@ -259,13 +266,6 @@ ngrok.directive({
 
             link: function($scope, $elem) {
                 $scope.$watch(function() { return $scope.body; }, function() {
-                    $code = $elem.find("code");
-                    // if we highlight when the code is empty, hljs manipulates the dom in a
-                    // a bad way that causes angular to fail
-                    if (!!$code.text()) {
-                        hljs.highlightBlock($code.get(0));
-                    }
-
                     if ($scope.body && $scope.body.ErrorOffset > -1) {
                         var offset = $scope.body.ErrorOffset;
 
@@ -317,7 +317,7 @@ ngrok.controller({
                     txnSvc.add(message.data);
                 });
             };
-            
+
             ws.onerror = function(err) {
                 console.log("Web socket error:" + err);
             };