A directive highlights a served object with JSON format with angular-highlightjs.

hljsToJson.js

angular.module('myApp')
.directive('hljsToJson', [function () {
  return {
    restrict: 'EA',
    scope: {
      obj: '=hljsToJson'
    },
    template: '<div hljs source="prettyJSON"></div>',
    link: function postLink(scope, iElm, iAttrs) {
      var tabWidth = 4;

      scope.prettyJSON = '';

      scope.$watch('obj', function (newObj, oldObj) {

        if (angular.isDefined(newObj) && 
            (newObj === oldObj || !angular.equals(newObj, oldObj))) {

          scope.prettyJSON = JSON.stringify(newObj, null, tabWidth);
        }

      });
    }
  };
}]);

Demo

Requirements

• AngularJS v1.0.1+
• Highlight.js v7.3+
• angular-highlightjs v0.0.1+

Usage

<div hljs-to-json="myObject"></div>