ColorCode

About

colorCode is a js class which allow to color html, js and css code and to show the result on your page.

Step 1 - define the code

Put your code inside template tag with colorcode attribute:

<template colorcode html js css result>
    code..
</template>

Attributes inside template with code:

• colorcode - let colorCode to find this template

• html - shows separated html tab. If other attributes not presented, all code will shown inside this tab.

• 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, don't use existing element's id, don`t define tag selectors on css code, and don't use variable or function names in js. All those may affect your site's existing code.

Step 2 - run script

You need to include colorCode and run the colorCode script after the DOM loaded (after body tag).

<script src="node_modules/als-colorcode/colorCode.js"></script> 
<script>
    new colorCode(dom = document) 
</script>

• dom - dom element's id, template it self or empty (document). Dom is an element for looking colorCode templates. If you leave it empty, colorCode looking for colorcode attribute in document.

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

Customize colors

By default the colors are:

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

You can customize each color before runing colorCode.

<script src="node_modules/als-colorcode/colorCode.js"></script> 
<script>
    colorCode.colors.prop = 'green'
    new colorCode(dom = document) 
</script>