/CodeView

Code visualizer for web

Primary LanguageJavaScriptMIT LicenseMIT

CodeView

Code visualizer for web with simple themes system.

Code Climate Issue Count

Setup:

Just include this <script src="code-view.js"></script>

or this, if you want to use it like jquery plugin <script src="jquery.code-view.js"></script>

or their minified versions from src/ folder in this repo.

Then choose one of the color schemes in themes/ folder. For example <link rel="stylesheet" href="sublime-monokai.css">

That's it !

Usage:

new CodeView({
    selector: '#result',
    content: 'var content = "optional initial content";'
})
.write('a = \'55\'')
.write([
    'var b = true;',
    '// some comment',
    'a = 100;'
])
.write('c = 123;');

Result:

screenshot_15

jQuery plugin:

$('#result')
    .codeView('// Initial content')
    .write('var obj = new Object(null);')
    .write([
        'var name = \'Ilian\';',
        '// some other comment',
        'name = null;'
    ]);

Load code from file:

new CodeView({
    selector: '#result',
    url: 'url/to/local/file'
});

It can be use for something like this for example. You can find some more docs here.