蒿棘居（测试linenumber模块）

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 0px; --bg: url('https://638183.freep.cn/638183/t24/w4/hjj.webp') no-repeat center/cover; --ma-size: 25%; } .son { position: absolute; width: 50%; height: 50%; background: radial-gradient(at 15% 15%, gold, yellow); border-radius: 50% 100% 0 100%; box-shadow: inset 0 0 34px rgba(180, 180, 0, 1); } .son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; background: inherit; border-radius: inherit; box-shadow: inherit; transform-origin: 100% 100%; transform: rotate(120deg); } .son::after { transform: rotate(240deg); } #btnFs { right: 20px; top: 20px; color: #eee; } </style> <div id="pa"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=376126" autoplay loop></audio> <video class="pd-vid" src="https://img.tukuppt.com/video_show/3670683/00/02/09/5b508a5b45fa7.mp4" autoplay loop muted></video> <div id="ma" class="hue-rotate"> <div class="son"></div> </div> </div> <script type="module"> import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js'; FS(pa, ma); </script>

马黑黑

最先心血来潮写的 lnum.js 利用 ol li 标签实现，绝大多数环境下工作完好，但在花朝论坛水土不服；接着改用自定义标签重新写一个 linenum.js，在花朝论坛代码行号的显示没有问题了，但是运行不了代码；昨晚考虑了一下，得再写一个，命名为 linenumber.js，主要目的是彻底解决在花潮论坛的兼容问题，这就有了上面一楼的代码行号样式，和前一个版本相比，还多了一个预览按钮。

linenumber 模块的预览功能默认不开启，需要在 class="codebox" 的 div 标签加入一个 data- 属性，data-prev，值为非空的任意字符即可。例如：

        <div class="codebox" data-prev="v">
                //... 所有代码在这里（需要转义，但代码内部支持行内修饰用的HTML标签）
        </div>

代码框容器div标签支持三个 data-* 属性，用于设置相关配置，除 data-prev 用来做是否启动预览功能的属性外，还有：

        data-gap : 设置行号左边距，属性缺省时值为 56 【例】data-gap="60"
        data-title : 设置代码框左上角标题，属性缺省时默认为 “代码:” 【例】data-title="帖子代码:"

生成完整代码：请访问工具页面 代码行号生成器

关于代码行内修饰标签：

展示的代码，需要强调的，可通过 <span style="color: red;">代码字串</span> 之类的行内标签实现。linenumber 模块也提供有几个简洁的自定义标签，例如给代码着上红色， <txt-red>代码字串</txt-red> ，很方便；都有哪一些可通过查看源码收集。行内修饰标签不要转义！

红影

马黑黑 发表于 2025-8-7 12:24
最先心血来潮写的 lnum.js 利用 ol li 标签实现，绝大多数环境下工作完好，但在花朝论坛水土不服；接着改用 ...

去看了代码行号生成器，可以生成代码行号，还能预览帖子。真棒

红影

预览正常，鼠标触碰代码，所在行还会高亮。黑黑辛苦，这个已经在花潮兼容了

梦江南

这个代码生成器，非常棒，还能浏览。这帖蒿棘居很漂亮。

花飞飞

马黑黑 发表于 2025-8-7 12:24
最先心血来潮写的 lnum.js 利用 ol li 标签实现，绝大多数环境下工作完好，但在花朝论坛水土不服；接着改用 ...

一楼直接就可以预览了，一点就能看效果。。。。。
感觉这个贴子比普通贴子的技术性更强。。。太好了。。
你这么优秀还这么努力，我等小白咋整~~
大赞一个，辛苦啦，上茶

花飞飞

马黑黑 发表于 2025-8-7 12:24
最先心血来潮写的 lnum.js 利用 ol li 标签实现，绝大多数环境下工作完好，但在花朝论坛水土不服；接着改用 ...

试了几次，让生成的代码着红色，直接抄你内切多边形的也不成功。。。晕了。

山人

火狐下表现完美。

评分后出现异常，需要刷新，这是论坛对 es6 模块的处理机制所致。

花飞飞

这个行号生成器好实用，我得搬走了。。以后不用费劲先发贴再发代码了。。

马黑黑

花飞飞 发表于 2025-8-7 17:03
一楼直接就可以预览了，一点就能看效果。。。。。
感觉这个贴子比普通贴子的技术性更强。。。太好了。。 ...

谢茶

马黑黑

花飞飞 发表于 2025-8-7 17:24
这个行号生成器好实用，我得搬走了。。以后不用费劲先发贴再发代码了。。

马黑黑

山人 发表于 2025-8-7 17:23
火狐下表现完美。

评分后出现异常，需要刷新，这是论坛对 es6 模块的处理机制所致。

马黑黑

红影 发表于 2025-8-7 13:09
去看了代码行号生成器，可以生成代码行号，还能预览帖子。真棒

谢棒

马黑黑

花飞飞 发表于 2025-8-7 17:22
试了几次，让生成的代码着红色，直接抄你内切多边形的也不成功。。。晕了。

代码部分修饰用的是HTML标签，应该是做好后补上，不然搬来搬去它会被换掉。

花飞飞

马黑黑 发表于 2025-8-7 18:39
代码部分修饰用的是HTML标签，应该是做好后补上，不然搬来搬去它会被换掉。

好哒。。看来要挑重中之重来标注

马黑黑

花飞飞 发表于 2025-8-7 21:17
好哒。。看来要挑重中之重来标注

一般是非常必要的地方，毕竟工作量不低

花飞飞

马黑黑 发表于 2025-8-7 18:37
谢茶

谢家茶园出品

马黑黑

花飞飞 发表于 2025-8-7 21:19
谢家茶园出品

谢家茶，花家酒，好喝直上重天九

红影

马黑黑 发表于 2025-8-7 18:38
谢棒

黑黑辛苦了

马黑黑

红影 发表于 2025-8-7 21:32
黑黑辛苦了