1.1.0 • Published 8 years ago

angular-json-print v1.1.0

Weekly downloads
6
License
-
Repository
github
Last release
8 years ago

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'])

  2. 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>