蒿棘居（测试linenumber模块）
<div class="codebox" data-prev="1"><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>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 本帖最后由 马黑黑 于 2025-8-7 12:47 编辑
最先心血来潮写的 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 标签实现，绝大多数环境下工作完好，但在花朝论坛水土不服；接着改用 ...
去看了代码行号生成器，可以生成代码行号，还能预览帖子。真棒{:4_199:} 预览正常，鼠标触碰代码，所在行还会高亮。黑黑辛苦，这个已经在花潮兼容了{:4_199:} 这个代码生成器，非常棒，还能浏览。这帖蒿棘居很漂亮。{:4_187:} 本帖最后由 花飞飞 于 2025-8-7 17:23 编辑
马黑黑 发表于 2025-8-7 12:24
最先心血来潮写的 lnum.js 利用 ol li 标签实现，绝大多数环境下工作完好，但在花朝论坛水土不服；接着改用 ...
一楼直接就可以预览了，一点就能看效果。。。。。
感觉这个贴子比普通贴子的技术性更强。。。太好了。。
你这么优秀还这么努力，我等小白咋整~~
大赞一个，辛苦啦，上茶{:4_199:}
马黑黑 发表于 2025-8-7 12:24
最先心血来潮写的 lnum.js 利用 ol li 标签实现，绝大多数环境下工作完好，但在花朝论坛水土不服；接着改用 ...
试了几次，让生成的代码着红色，直接抄你内切多边形的也不成功。。。晕了。{:4_173:} 火狐下表现完美。
评分后出现异常，需要刷新，这是论坛对 es6 模块的处理机制所致。 这个行号生成器好实用，我得搬走了。。以后不用费劲先发贴再发代码了。。{:4_173:} 花飞飞 发表于 2025-8-7 17:03
一楼直接就可以预览了，一点就能看效果。。。。。
感觉这个贴子比普通贴子的技术性更强。。。太好了。。 ...
谢茶 花飞飞 发表于 2025-8-7 17:24
这个行号生成器好实用，我得搬走了。。以后不用费劲先发贴再发代码了。。
{:4_191:} 山人 发表于 2025-8-7 17:23
火狐下表现完美。
评分后出现异常，需要刷新，这是论坛对 es6 模块的处理机制所致。
{:4_190:} 红影 发表于 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
谢棒
黑黑辛苦了{:4_187:} 红影 发表于 2025-8-7 21:32
黑黑辛苦了
{:4_191:}