·小希 - 2024-9-7 16:26
·悄然 - 2024-9-7 16:25
·飞飞 - 2024-9-7 16:22
·悄然 - 2024-9-7 16:20
·悄然 - 2024-9-6 19:07
·小希 - 2024-9-6 19:05
·飞飞 - 2024-9-6 19:00
·飞飞 - 2024-9-6 17:32
·小希 - 2024-9-6 17:31
helight : 身轻如燕的代码展示脚本
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 属性等,但请确保所做设置不会破坏代码呈现框架的完整结构。
前一篇: 原生lrc歌词同步帖子模板
下一篇: 原生lrc歌词同步之管状进度条播放器
评论列表 [3条]
#3 | 知名不具 于 2024-7-14 13:50 发布: 让代码带颜色,这个好。
#2 | 悄然 于 2024-7-13 08:28 发布: 标题党~身轻如燕,跟马踏飞燕似的……
#1 | 飞飞 于 2024-7-13 08:19 发布: 这是把自动着色打包的节奏~我来仔细看看有哪些不同