CodeCanyon JSON Painter 5449948

CodeCanyon JSON Painter 5449948

CodeCanyon JSON Painter 5449948
JavaScript \ Miscellaneous
Painter \ Lightweight \ Plugin \ Standalone \ Highlight \ Syntax \ Json \ Jquery

JavaScript - JSON Painter 5449948 by intellex @ CodeCanyon

JavaScript \ Miscellaneous

Last Update: 28 August 13; Compatible Browsers: IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome; Software Version: jQuery; High Resolution: Yes; Files Included: JavaScript JS.

If you have ever a need read a raw JSON string, you probably noticed that it aint that much human-readable…

What is JSON painter?
This simple jQuery plugin will reformat and colorize any valid JSON, and you eyes will be forever gratefull for it

Here are the highlighs.

- Formats the JSON

- Syntax highlight

- Open / close individual object whitin

- One js file (3.1Kb) + one line of code

- Handles both JSON strings and objects

- Customize the style via CSS to fit your needs

See it in action
I beleive that there is no need to describe this plugin in more details, but if you are intrigued – here is a online demo with code snippets .

The How to guide

Step 1.

Download the script and place wherever you place the java scripts.

Step 2.

Include the jQuery and the JSON painter script in the <head> tag of your document, like this.

<!-- additional header content -->
<script type="text/javascript" src="" charset="utf-8"></script>
<script type="text/javascript" src="" charset="utf-8"></script>

Note that if you already have jQuery plugin included, you do not need to include it twice.

Step 3.

Create an element in the document that will hold the painted JSON

<div id="json"></div>

Step 4.

Have fun

<script type="text/javascript">
// Transform the data within the element (no params passed)
// Show painted JSON from a atring
var str = '{ node: "value", list: [ 1, 3, 4 ] }';
// Show painter JSON from an object
var obj = { node: "value", list: [ 1, 3, 4 ] };

Step 5.

If you are familiar with CSS, you can easily define your own styles.

Simply customize the snipper below add it to the <head> tag of your HTML document.

/** Define gloval style, like font size and family */
jsonpainter { }
/** Define how the key will be show */
jsonpainter-key { }
/** Define style for each variable type */
jsonpainter-value { }
jsonpainter-value-url { }
jsonpainter-value-null { }
jsonpainter-value-number { }
jsonpainter-value-string { }
jsonpainter-value-boolean { }
jsonpainter-value-boolean-true { }
jsonpainter-value-boolean-false { }


Keywords: developer, developers, format, formatter, highlighting, javacript, jquery, json, lightweight, painter, plugin, standalone, syntax highlight.

Tags: Painter, Lightweight, Plugin, Syntax, Highlight

Premium CodeCanyon JSON Painter 5449948 WordPress Themes, Website Templates, Mobile Themes, Flash Templates & Scripts from creative professional designers. Full details of CodeCanyon JSON Painter 5449948 for digital design and education. CodeCanyon JSON Painter 5449948 desigen style information or anything related.


Add Comments:
Enter Code: *