本帖最后由 马黑黑 于 2025-8-4 12:24 编辑 <br /><br /><style>
.artBox { font-size: 18px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.tRed { color: red; }
.tGreen { color: green; }
</style>
<div class="artBox">
<p>lnum，line number的缩写，行号之意。这是个极简的ES6模块，简简单单地给<mark>class="codebox"</mark>的HTML元素内的代码加上行号，不着色。</p>
<p>模块的导入和使用方法：</p>
<div class="codebox">
<span class="tGreen"><!-- 导入和使用 lnum --></span>
<script <span class="tRed">type="module"</span>>
import <span class="tRed">lnum</span> from '<span class="tRed">https://638183.freep.cn/638183/web/js/lnum.js</span>';
<span class="tRed">lnum()</span>;
</script>
</div>
<p>在HTML代码中，建议使用具有block块状属性的 div 标签装载代码，该 div 只要在class列表中存在 codebox 名称，模块就会自动为其加上代码行号，同时改变该 div 的背景颜色、字体等属性。像这样：</p>
<div class="codebox">
<div <span class="tRed">class="codebox"</span>>
<span class="tGreen"><!-- 这里是代码 --></span>
</div>
</div>
<p>需要注意的是，要加行号的代码HTML标签符号必须事先转义，就两个符号：<span class="tRed"><</span> 转为 <span class="tRed">&lt;</span>，<span class="tRed">></span> 转为 <span class="tRed">&gt;</span> 。模块之所以不自动转义，主要原因是保留代码中的自定义HTML功能，满足代码展示时可能需要添加关键代码的着色、加粗、设置斜体等修饰需求。</p>
<p>以下是一个完整使用了 lnum 模块的示例：</p>
<div class="codebox">
<span class="tGreen"><!-- 用 class="codebox" 的 div 装载转义过的代码 --></span>
<div class="codebox">
<span class="tRed">&lt;</span>style<span class="tRed">&gt;</span>
.ma {
margin: 30px auto;
padding: 4px 8px;
width: fit-content;
height: fit-content;
position: relative;
}
<span class="tRed">&lt;</span>style<span class="tRed">&gt;</span>
</div class="codebox">
<span class="tGreen"><!-- 导入和启用 lnum --></span>
<script type="module">
import lnum from 'https://638183.freep.cn/638183/web/js/lnum.js';
lnum();
</script>
</div>
<p>最后附上 lnum.js 源码，敬请批评指正：</p>
<div class="codebox">
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);
});
}
</div>
</div>
<script type="module">
import lnum from 'https://638183.freep.cn/638183/web/js/lnum.js';
lnum();
</script>
马黑黑 发表于 2024-5-19 09:41
严格来讲不是学代码，而是学习组织代码的方法，具体说就是尽可能多地掌握编程语言的相关概念、语法、内置 ...
这些都可以笼统地归为代码这个大类啊。
马黑黑 发表于 2024-5-18 22:47
拉而不倒
多拉两下{:4_170:}
南无月 发表于 2024-5-19 17:21
多拉两下
不倒翁怎么拉都一样
红影 发表于 2024-5-19 16:59
这些都可以笼统地归为代码这个大类啊。
不是的。代码是代码，语法是语法。好比语文说的语言，语言是语言，语法是语法一样道理。你总不能吧
这个人的语言很生动
说成
这个人的语法很生动
马黑黑 发表于 2024-5-19 17:21
不倒翁怎么拉都一样
晃晃悠悠{:4_172:}
南无月 发表于 2024-5-19 17:30
晃晃悠悠
就是不倒
马黑黑 发表于 2024-5-19 17:31
就是不倒
真是坚固
南无月 发表于 2024-5-19 17:33
真是坚固
是稳
马黑黑 发表于 2024-5-19 17:34
是稳
是的，不倒翁很稳{:4_170:}
马黑黑 发表于 2024-5-19 17:28
不是的。代码是代码，语法是语法。好比语文说的语言，语言是语言，语法是语法一样道理。你总不能吧
这 ...
差不多啊，知道指的是什么就好啊{:4_173:}
红影 发表于 2024-5-19 18:43
差不多啊，知道指的是什么就好啊
你这是模糊概念
南无月 发表于 2024-5-19 17:45
是的，不倒翁很稳
稳如泰山，泰山抵不住地震；稳如不倒翁，不倒翁摇摇晃晃不认怂。
马黑黑 发表于 2024-5-19 19:43
稳如泰山，泰山抵不住地震；稳如不倒翁，不倒翁摇摇晃晃不认怂。
不倒翁比泰山厉害{:4_170:}
马黑黑 发表于 2024-5-19 19:27
你这是模糊概念
又不是做教科书，交流中只要指向明确即可。
红影 发表于 2024-5-19 21:15
又不是做教科书，交流中只要指向明确即可。
模糊就是明确？
马黑黑 发表于 2024-5-19 23:02
模糊就是明确？
知道指的什么，这不是模糊啊。
红影 发表于 2024-5-19 23:12
知道指的什么，这不是模糊啊。
是稀里糊涂？
马黑黑 发表于 2024-5-19 23:13
是稀里糊涂？
知道，意味着就是明确呢。
红影 发表于 2024-5-19 23:22
知道，意味着就是明确呢。
额，说反话呢