如何使用 JavaScript 显示代码块的行号？答案

【问题标题】：How to show line numbers for a code block using JavaScript?如何使用 JavaScript 显示代码块的行号？
【发布时间】：2012-04-08 16:36:54
【问题描述】：

事情就是这样。我使用'Highlight.js'（一个基于javascript的自动语法高亮器）来语法高亮我网站上的代码。但它不支持行号或斑马条纹（用于替代代码行）。

我的代码块包裹在 <pre><code> 块中，如下所示：

<pre><code>
&lt;script type=&quot;text/javascript&quot;&gt;
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i &gt;= 0;) {
alert(&#39;Hello &#39; + String(world));
}
}
&lt;/script&gt;
&lt;style&gt;
p { color: pink }
b { color: blue }
u { color: &quot;umber&quot; }
&lt;/style&gt;
</code></pre>

输出如下：

现在我想使用 JavaScript 动态显示代码块的行号。我怎么做？（另外，如果可能的话，我如何显示斑马条纹？）

谢谢。

PS：我不懂 JavaScript，所以请尽量说清楚。我会尽力理解。谢谢。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用替代框架，例如 http://alexgorbatchev.com/SyntaxHighlighter/

或者看看这里，找到适合的东西。 http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/

【讨论】：

【解决方案2】：

基本步骤是：

获取元素内部的 HTML。
由换行符分割 (\n)。
对于每个字符串，在其前面添加一个数字和一个点。
用换行符再次组合字符串。
将字符串设置为元素的 HTML。

但是，这会弄乱语法高亮器的语法高亮显示，因为它很可能无法识别代码前面有行号。所以语法高亮需要为你提供行号的功能。

【讨论】：

【解决方案3】：

为旧问题添加新答案。

我想像 ace.js 那样在左边距显示行号。

我的解决方案有一些骇人听闻的细节，但无论如何我还是想分享它，因为事实证明，相对定位跨度内的绝对定位跨度非常适用于此。

受到上述答案和this answer about relative positioning without taking up space的鼓舞，我使用了：

var line = 1;
code = code.replace(/^/gm, function() {
    return '<span class="line-number-position">&#x200b;<span class="line-number">' + line++ + '</span></span>';
});

正则表达式/^/gm用span-within-span“替换”每一行的开头。

&#x200b; 是一个宽度为零的空格，因为显然 firefox 似乎很难决定是在字符的顶部还是底部放置一个零高度的跨度。

line-number-position 和 line-number 是这样的 CSS 类：

.line-number-position {
    position: relative;
    top: 0;
}

.line-number {
    position: absolute;
    text-align: right;
    right: 17px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 12px;
}

是的，里面有一些魔术数字来匹配 ace 格式，但关键是在每行的开头放置一个相对定位的零大小跨度，并将其用作参考点以添加绝对定位跨越左边距。

适用于当前的 Chrome、Safari、Firefox 和 Opera。

【讨论】：