如何使用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，请尽可能清晰明了地解释。我会尽力理解。谢谢。

- its_me

Answer 1

您可以使用其他框架，例如 http://alexgorbatchev.com/SyntaxHighlighter/。

或者在这里查找并找到适合您的内容。 http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/。

- nickw444

Answer 2

给旧问题添加一个新答案。

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

我的解决方案有些hacky的细节，但我仍然想分享它，因为发现在相对定位的span内使用绝对定位的span可以很好地实现这个功能。

受上面的答案和关于不占用空间的相对定位的这个答案的鼓舞，我使用了：

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

正则表达式/^/gm将每行的开头替换为带有的span。

​是一个零宽度空格，因为火狐浏览器似乎无法确定在字符顶部还是底部放置零高度的span。

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格式，但重点是在每行的开头放置一个相对定位的零尺寸span，并将其用作添加绝对定位的span到左边距的参考点。

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

- Gordon

Answer 3

基本步骤如下:

1. 获取元素内的HTML内容。
2. 按换行符 (\n) 进行分隔。
3. 对于每个字符串，在其前面添加一个数字和一个点号。
4. 再将字符串用换行符组合在一起。
5. 将该字符串设置为元素的HTML。

然而，这样做会破坏语法高亮工具的语法高亮，因为它很可能无法识别代码前面的行号。因此，语法高亮工具需要为您提供行号功能。

- Simeon Visser