马黑黑 发表于 2024-7-13 07:56

【原创】helight : 身轻如燕的代码展示脚本

本帖最后由 马黑黑 于 2024-7-13 08:06 编辑 <br /><br /><style>
.art { margin: auto; }
.art > p { font-size: 20px; }
.art mark { background: lightblue; }
</style>

<div class="art">
        <p>helight.js用于呈现带行号的CSS、HTML、JS代码，且，若浏览器支持 CSS Custom Highlight API，代码会以非入侵性的方式自动着色，着色规则以helight自带的混合设定实现，即着色方案并不严格区分CSS、HTML和JS。</p>
        <p>使用helight步骤极简，分为三步：</p>
        <p>一是引用 helight.js：</p>
        <div class="hE">
<pre>
&lt;script&gt;
        const sc = document.createElement('script');
        sc.chartset = 'utf-8';
        sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
        document.body.appendChild(sc);
&lt;/script&gt;
</pre>
        </div>
        <p>同一个页面里，JS仅需调用一次，不要重复调用。如果浏览器不支持CSS伪元素代码高亮功能，那么代码不会着色，但行号会有、代码能正常显示。</p>
        <p>二是处理一下要发布的代码，将 <mark>&lt;</mark> 转换为 <mark>&amp;lt;</mark>，将 <mark>&gt;</mark> 转换为 <mark>&amp;gt;</mark>。这是必做的工作，因为，如果不转义，浏览器会渲染代码而不是呈现代码。</p>
        <p>三是使用如下结构装载代码：</p>
        <div class="hE">
<pre>
&lt;div class="hE"&gt;&lt;pre&gt;
代码行1
代码行2
        代码行N
&lt;/pre&gt;&lt;/div&gt;
</pre>
        </div>
        <p>注意 div 的 class 属性设置，注意属性值的大小写。同时注意 pre 标签的特性对代码排版的影响：所有的空格、制表符都得到绝对的尊重（例如上面的 <mark>代码行N</mark> 前面是一个制表符）。pre起始和收尾标签如果需要独占一行，建议顶格书写，收尾符前面最好不要留空行。</p>
        <p>如此，同一个页面里，所有 class="hE" 的 div 标签，其内 pre 标签里面的代码将会自动着色。</p>
        <p>最后说明：class="hE" 的 div 标签已经在 helight 中设定有css样式，发布代码的页面无需进行设置。当然如果确实需要，也可以做一些简单的设置，比如 .hE 的 width 属性、.hE > pre 的 background 属性等，但请确保所做设置不会破坏代码呈现框架的完整结构。</p>
</div>

<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>

马黑黑 发表于 2024-7-13 08:07

helight 演示：

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77116&pid=2146914&fromuid=7130

南无月 发表于 2024-7-13 08:53

来看看马踏 飞燕脚 本。。。目 前只能是看看。
反正时实着色是越来越先进就对了

红影 发表于 2024-7-13 10:06

马黑黑 发表于 2024-7-13 08:07
helight 演示：

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77116&pid=21 ...

原来这个代码是用这个着色去展示的，真神奇，展示出来后，只见完整的代码，着色的封装代码并不出现{:4_199:}

红影 发表于 2024-7-13 10:08

“如果不转义，浏览器会渲染代码而不是呈现代码。”
看到了，那个帖子里的全部做了转义，让那个帖子的代码被带颜色地呈现了出来{:4_187:}

红影 发表于 2024-7-13 10:08

原来为代码着色要花这么多功夫呢，太不容易了{:4_199:}

马黑黑 发表于 2024-7-13 12:12

红影 发表于 2024-7-13 10:08
原来为代码着色要花这么多功夫呢，太不容易了

不做这个，下不来决心学习 selection 和 range

马黑黑 发表于 2024-7-13 12:12

红影 发表于 2024-7-13 10:06
原来这个代码是用这个着色去展示的，真神奇，展示出来后，只见完整的代码，着色的封装代码并不出现{:4_19 ...

JS在背后做着色的工作

马黑黑 发表于 2024-7-13 12:12

红影 发表于 2024-7-13 10:08
“如果不转义，浏览器会渲染代码而不是呈现代码。”
看到了，那个帖子里的全部做了转义，让那个帖子的代码 ...

{:4_190:}

马黑黑 发表于 2024-7-13 12:13

南无月 发表于 2024-7-13 08:53
来看看马踏 飞燕脚 本。。。目 前只能是看看。
反正时实着色是越来越先进就对了

{:4_190:}

梦江南 发表于 2024-7-13 13:58

谢谢老师无私奉献。学习学习再学习。

红影 发表于 2024-7-13 14:37

马黑黑 发表于 2024-7-13 12:12
不做这个，下不来决心学习 selection 和 range

黑黑这么厉害了，还在学习，太赞了{:4_187:}

红影 发表于 2024-7-13 14:37

马黑黑 发表于 2024-7-13 12:12
JS在背后做着色的工作

完全想不到呢{:4_187:}

红影 发表于 2024-7-13 14:39

马黑黑 发表于 2024-7-13 12:12


着色的真好，看得清晰{:4_204:}

马黑黑 发表于 2024-7-13 17:28

红影 发表于 2024-7-13 14:39
着色的真好，看得清晰

着色的作用主要是辅助性质的，比如更易于阅读。这和彩色版的教科书一样一样的

马黑黑 发表于 2024-7-13 17:29

红影 发表于 2024-7-13 14:37
完全想不到呢

JS就是跟这事的呀。它可以以明码的方式出现在页面中，也可以存为文档后被引用。少量的JS代码一般直接在页面中写，多了就存档待用。

马黑黑 发表于 2024-7-13 17:31

红影 发表于 2024-7-13 14:37
黑黑这么厉害了，还在学习，太赞了

选区和范围是门大学问，我对文本控件的选区是熟悉的，非文本控件的觉得太复杂一直不怎么去碰，用上是查查资料解决问题就88，现在不行了，得静下心来弄他一弄。

马黑黑 发表于 2024-7-13 17:49

梦江南 发表于 2024-7-13 13:58
谢谢老师无私奉献。学习学习再学习。

{:4_190:}

红影 发表于 2024-7-13 21:59

马黑黑 发表于 2024-7-13 17:28
着色的作用主要是辅助性质的，比如更易于阅读。这和彩色版的教科书一样一样的

是的，突出展示，可以让人一眼看到想关注的。

红影 发表于 2024-7-13 22:00

马黑黑 发表于 2024-7-13 17:29
JS就是跟这事的呀。它可以以明码的方式出现在页面中，也可以存为文档后被引用。少量的JS代码一般直接在页 ...

js可以存档，这个还是刚刚知道呢{:4_187:}
页: [1] 2 3
查看完整版本: 【原创】helight : 身轻如燕的代码展示脚本