colorCode documentation

In html

Define the code

Put your code inside template tag with colorcode attribute:


<template colorcode = "html js css result" js="true" css="true" result="true">
    code..
</template>

Parameters of colorcode:

Then you set colorcode="parameters" it define which tab to show. if parameters not set, only code shows.

html - this parameter is relevant only then other parameters are seted
js - all code between <script></script> will shown as separate tab
css - all code between <style></style> will shown as separate tab
result - will show the result as separated tab

Caution: If you showing result, dont use existing element's id, dont define tag selectors on css code, and don't use variable or function names in js, that can affect your site's existing js code.

Active tabs

By default, only first tab is active. If you want to set active other tabs too, define it with separate attribute.

js="true" css="true" result="true" - if specified the folowing will be active (shows the code)

In javaScript

Bind script at end of document - <script src="colorcode.js"></script>

dom - may be dom id, template it self or empty (document)

Run colorCode - <script>new colorCode(dom = document,colorsObj) </script>

You can customize style of colorcodes elements by - [colorcode] {..}

Customize colors

Second parameter in colorCode is colorsObj that allows to customize colors of code.

By default the colors are:

    {
        inner:'white',
        tag:'#FD2671',
        prop:'#A2D529',
        text:'#F2E679',
        comment:'#6F7463',
        fn:'#A2D529',
        let:'#69E6E3',
        false:'#B282F2',
        this:'#FF971F'
    }