lnum ：代码加行号的极简模块
lnum，line number的缩写，行号之意。这是个极简的ES6模块，简简单单地给class="codebox"的HTML元素内的代码加上行号，不着色。
模块的导入和使用方法：
<!-- 导入和使用 lnum -->
<script type="module">
import lnum from 'https://638183.freep.cn/638183/web/js/lnum.js';
lnum();
</script>
在HTML代码中，建议使用具有block块状属性的 div 标签装载代码，该 div 只要在class列表中存在 codebox 名称，模块就会自动为其加上代码行号，同时改变该 div 的背景颜色、字体等属性。像这样：
<div class="codebox">
<!-- 这里是代码 -->
</div>
需要注意的是，要加行号的代码HTML标签符号必须事先转义，就两个符号：< 转为 <，> 转为 > 。模块之所以不自动转义，主要原因是保留代码中的自定义HTML功能，满足代码展示时可能需要添加关键代码的着色、加粗、设置斜体等修饰需求。
以下是一个完整使用了 lnum 模块的示例：
<!-- 用 class="codebox" 的 div 装载转义过的代码 -->
<div class="codebox">
<style>
.ma {
margin: 30px auto;
padding: 4px 8px;
width: fit-content;
height: fit-content;
position: relative;
}
<style>
</div class="codebox">
<!-- 导入和启用 lnum -->
<script type="module">
import lnum from 'https://638183.freep.cn/638183/web/js/lnum.js';
lnum();
</script>
最后附上 lnum.js 源码，敬请批评指正：
export default function lnum() {
const boxes = document.querySelectorAll('.codebox');
if (boxes.length < 1) return;
const cssStyle = `
.codebox {
margin: 20px;
padding: 10px 12px;
background: beige;
box-shadow: 0 0 1px rgba(0,0,0,.9);
position: relative;
}
.codebox ol {
margin: 0 0 0 40px;
padding: 0;
white-space: pre-wrap;
word-break:break-all;
tab-size: 4;
list-style-type: decimal-leading-zero;
list-style-position: outside;
}
.codebox ol li {
margin: 0;
padding: 0;
font: normal 16px/20px Consolas, 'Courier New', 'Andale Mono', monospace;
color: #000;
}
.codebox ol li::marker {
color: #aaa;
}
`;
let styleEle = document.getElementById('lnum_css');
if (!styleEle) {
styleEle = document.createElement('style');
styleEle.id = 'lnum_css';
styleEle.type = 'text/css';
styleEle.textContent = cssStyle;
document.body.prepend(styleEle);
}
boxes.forEach(box => {
const ol = document.createElement('ol');
const lines = box.innerHTML.trim().split('\n');
lines.forEach(line => {
const li = document.createElement('li');
li.innerHTML = line;
ol.appendChild(li);
});
box.innerHTML = '';
box.appendChild(ol);
});
}
前一篇: tween.js 初探
下一篇: 原生LRC歌词独立版之简单同步和亮色同步模块说明
发表评论:
评论列表 [1条]
#1 | 小希 于 2025-8-3 20:38 发布: 试了一个贴子代码，加上行号十分成功。。。跟编辑器结合起来使用，转义更顺手。
