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

Question

这就是事情。我使用“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，所以请尽量保持清晰。我会尽力去理解。感谢。

Answer 1

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

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

Answer 2

基本步骤如下：

1. 获取元素内的HTML。
2. 按换行符（\n）拆分。
3. 对于每个字符串，在其前面添加一个数字和一个点。
4. 再次将字符串与换行符结合使用。
5. 将字符串设置为元素的HTML。

然而，这会弄乱语法高亮显示的语法高亮，因为它很可能无法识别代码前面有行号。因此语法高亮显示器需要为您提供行号功能。

Answer 3

为旧问题添加新答案。

我想在ace.js的左边缘显示行号。

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

受到上述答案和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＆＃34;替换＆＃34;每一行的开头都有span-span-span。

​是一个零宽度空间，因为很明显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。