als-colorcode v1.2.11
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>