Skip to content

Angular directive to pretty-print and highlight JSON syntax.

License

Notifications You must be signed in to change notification settings

ChrisNoel/angular-json-print

 
 

Repository files navigation

angular-json-print

Angular directive to pretty-print and syntax-highlight JSON.

Build Status Code Climate Test Coverage

##Usage

  1. Include 'json-print' as a dependency for your app.

angular.module('myApp', ['json-print'])

  1. Add the directive json-print to an element, along with the data source
  <pre json-print="{Obj|String}" json-indent="[Int]"></pre>

Note: The use of an element like <pre> is required to preserve indentation and line breaks, but has no effect on highlighting.

#####Arguments

  • json-print - Accepts either a regular JavaScript object, or a string of JSON.
  • json-indent - Optional - Level of indentation, defaults to four spaces.

####Markup

Values, properties, braces and brackets are wrapped in <span>s with the following classes:

  • Properties

      <span class="json-print-prop">"foo"</span>:
  • Strings. Any HTML-markup is escaped and displayed as text.

      <span class="json-print-string">"String with <p>HTML</p>"</span>
  • Numbers. Additional classes for zero, and positive and negative numbers.

        <span class="json-print-number json-print-zero">0</span>
        <span class="json-print-number json-print-plus">1</span>
        <span class="json-print-number json-print-minus">-1</span>
  • Booleans. Additional classes for true/false.

      <span class="json-print-bool json-print-true">true</span>
      <span class="json-print-bool json-print-false">false</span>
  • Null

        <span class="json-print-null">null</span>
  • Objects

        <span class="json-print-object">{</span>
        <span class="json-print-object">}</span>
  • Arrays

        <span class="json-print-array">[</span>
        <span class="json-print-array">]</span>

About

Angular directive to pretty-print and highlight JSON syntax.

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Languages

  • JavaScript 89.7%
  • HTML 7.0%
  • CSS 3.3%