本帖最后由 马黑黑 于 2025-8-4 12:24 编辑
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;
boxes.forEach(box => {
const ol = document.createElement('ol');
const lines = box.innerHTML.trim().split('\n');
lines.forEach(line => {
const li = document.createElement('li');
li.style.cssText += `
padding: 0 10px;
font: normal 16px/20px Consolas, 'Courier New', 'Andale Mono', monospace;
color: #000;
white-space: pre-wrap;
word-break:break-all;
tab-size: 4;
`;
li.innerHTML = line;
ol.appendChild(li);
});
box.innerHTML = '';
box.style.cssText += `
margin: 20px 10px;
padding: 10px 12px;
background: beige;
box-shadow: 0 0 1px rgba(0,0,0,.9);
position: relative;
`;
box.appendChild(ol);
});
}
| 
楼主: 马黑黑
楼主
显身卡
发表于 2024-5-19 16:59
发表于 2024-5-19 17:21
