helight.js用于呈现带行号的CSS、HTML、JS代码，且，若浏览器支持 CSS Custom Highlight API，代码会以非入侵性的方式自动着色，着色规则以helight自带的混合设定实现，即着色方案并不严格区分CSS、HTML和JS。

使用helight步骤极简，分为三步：

一是引用 helight.js：

<script>
	const sc = document.createElement('script');
	sc.chartset = 'utf-8';
	sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
	document.body.appendChild(sc);
</script>

同一个页面里，JS仅需调用一次，不要重复调用。如果浏览器不支持CSS伪元素代码高亮功能，那么代码不会着色，但行号会有、代码能正常显示。

二是处理一下要发布的代码，将 < 转换为 &lt;，将 > 转换为 &gt;。这是必做的工作，因为，如果不转义，浏览器会渲染代码而不是呈现代码。

三是使用如下结构装载代码：

<div class="hE"><pre>
代码行1
代码行2
	代码行N
</pre></div>

注意 div 的 class 属性设置，注意属性值的大小写。同时注意 pre 标签的特性对代码排版的影响：所有的空格、制表符都得到绝对的尊重（例如上面的 代码行N 前面是一个制表符）。pre起始和收尾标签如果需要独占一行，建议顶格书写，收尾符前面最好不要留空行。

如此，同一个页面里，所有 class="hE" 的 div 标签，其内 pre 标签里面的代码将会自动着色。

最后说明：class="hE" 的 div 标签已经在 helight 中设定有css样式，发布代码的页面无需进行设置。当然如果确实需要，也可以做一些简单的设置，比如 .hE 的 width 属性、.hE > pre 的 background 属性等，但请确保所做设置不会破坏代码呈现框架的完整结构。