Skip to content
This repository has been archived by the owner on Nov 24, 2018. It is now read-only.
/ object-styler Public archive

Stylize JSON text in HTML

Notifications You must be signed in to change notification settings

alshakh/object-styler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5001e19 · Nov 20, 2018

History

6 Commits
May 24, 2015
May 24, 2015
May 24, 2015
May 18, 2015
May 18, 2015
Nov 20, 2018

Repository files navigation

Object Styler

stylize JSON text, produce HTML output. It applies styles/colors based on key:value pairs. I don't really know a proper use for it; I used it to show pages in a website based on JSON values.

Archived !

Example

var styler = new ObjectStyler.Styler({punctuation: "codeSyl", blockIndent : "indentedSyl", endLine: "endLineSyl"}, [
    {name: "codeSyl", className: "grey"},
    {name: "greenSyl", className: "green"},
    {name: "redSyl", className: "red"},
    {name: "endLineSyl", className: "endl"},
    {name: "bigSyl", className: "big"},
    {name: "indentedSyl", className: "indentedBlock"},
    {name: "fancy", className: "big red"},
]);

var obj = {
    key1 : "value",
    key2 : 234,
    obj1 : {
        obj1Key1 : "AAA",
        obj1Key2 : "!!link,, LINK_URL,, Link Title"
    },
    numberArray : [23,"dfdf",3434],
    objectArray : [34, {key1:"v1"}, {key2:34}, 22]
}

var style = {
    key2 : {k:'redSyl',v:'bigSyl'},
    key1 : {v:'fancy'},
    obj1 : {k:'greenSyl', v: {
        obj1Key1 : {k:'redSyl', v:'fancy'}
    }},
    numberArray : {k:['bigSyl', 'greenSyl'], v:['bigSyl', 'codeSyl']},
    objectArray : {v:{key1:{k:'greenSyl',v:'redSyl'}}}
}

document.body.innerHTML = styler.style(obj,style);

Result :

<span class="grey">{</span>
<div class="indentedBlock"><span>key1</span><span class="grey"> : </span><span class="grey">"</span><span class="big red">value</span><span class="grey">"</span><span class="grey endl">,</span><span class="red">key2</span><span class="grey"> : </span><span class="big">234</span><span class="grey endl">,</span><span class="green">obj1</span><span class="grey"> : </span><span class="grey">{</span>
    <div class="indentedBlock"><span class="red">obj1Key1</span><span class="grey"> : </span><span class="grey">"</span><span class="big red">AAA</span><span class="grey">"</span><span class="grey endl">,</span><span>obj1Key2</span><span class="grey"> : </span><span class="grey">"</span><span><a href="LINK_URL">Link Title</a></span><span class="grey">"</span><span class="grey endl">,</span></div><span class="grey">}</span><span class="grey endl">,</span><span class="green big">numberArray</span><span class="grey"> : </span><span class="grey">[</span><span class="grey big">23</span><span class="grey">, </span><span class="grey">"</span><span class="grey big">dfdf</span><span class="grey">"</span><span class="grey">, </span><span class="grey big">3434</span><span class="grey">]</span><span class="grey endl">,</span><span>objectArray</span><span class="grey"> : </span><span class="grey">[</span><span>34</span><span class="grey">, </span><span class="grey">{</span>
    <div class="indentedBlock"><span>key1</span><span class="grey"> : </span><span class="grey">"</span><span>v1</span><span class="grey">"</span><span class="grey endl">,</span></div><span class="grey">}</span><span class="grey">, </span><span class="grey">{</span>
    <div class="indentedBlock"><span>key2</span><span class="grey"> : </span><span>34</span><span class="grey endl">,</span></div><span class="grey">}</span><span class="grey">, </span><span>22</span><span class="grey">]</span><span class="grey endl">,</span></div><span class="grey">}</span>

how is example shown with css

About

Stylize JSON text in HTML

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published