als-coloredcode v0.3.1
ColorCode
About
colorCode colorize html, js and css code and can show the result on your page. You can colorize the code on backend with node.js and on front end.
- new in 0.3.1: looking for template on DOMContentLoaded or on function run
Installation
Install the package with npm i als-coloredcode
FrontEnd usage
FrontEnd use:
<head>
<script src="node_modules/als-coloredcode/coloredcode.js"></script>
<script>
// true - by default - ColoredCode looking for templates only once on DOMContentLoaded
// false - ColoredCode looking for templates any time function runs
ColoredCode.templates(true)
</script>
</head>
<body>
<template code="html" result>
<button onclick="console.log('test')">click</button>
</template>
<template code="javascript">
function test(param) {
let aa = param
if(param == aa) console.log(param)
return `hello ${param} test`
}
</template>
<template code="css">
.test {
color:blue;
width:20px;
}
</template></body>In example above, on head section you need to include coloredcode.js. And then you need to run script ColorCode.templates(). The script will look for templates with code attribute. Each found template will be converted to coloredCode. If template will include result attribute, in addition to colored code, the code it self will be published too.
BackEnd usage
There are two methods for usage in Node.js:
1. ColoredCode.build(srcFilePath,outFilePath)
2. ColoredCode.replaceCode(content)
As in a frontend, the code has to be inside <template code="html/javascript/css" result></template>
Build option
let ColoredCode = require('als-coloredcode')
let srcFilePath = [__dirname,'..','src','file.html']
let outFilePath = [__dirname,'..','out','file.html']
ColoredCode.build(srcFilePath,outFilePath)replaceCode option
let ColoredCode = require('als-coloredcode')
let content = `
<div>
Some content
<template code="html" result>
<button onclick="console.log('test')">click</button>
</template>
</div>`
let result = ColoredCode.replaceCode(content) // return coloredCode as stringColor customization
You can customize the colors like this (the colores below are default):
ColoredCode.colors = {
'attribute':'greenyellow',
'attribute-value':'#fbfb6c',
'tag':'#fd6565',
'definition':'lightskyblue',
'comment':'gray',
'digit':'#9974dd',
'regular':'white',
'bgc':'#06212c',
}