请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-7-13 08:06 编辑
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伪元素代码高亮功能，那么代码不会着色，但行号会有、代码能正常显示。
二是处理一下要发布的代码，将 < 转换为 <，将 > 转换为 >。这是必做的工作，因为，如果不转义，浏览器会渲染代码而不是呈现代码。
三是使用如下结构装载代码：
<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 属性等，但请确保所做设置不会破坏代码呈现框架的完整结构。
| 
发表于 2024-7-13 07:56
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-7-13 08:53
发表于 2024-7-13 13:58
