如何使用 JavaScript 显示代码块的行号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9850707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show line numbers for a code block using JavaScript?
提问by its_me
Here's the thing. I use 'Highlight.js' (a javascript-based automatic syntax highlighter) to syntax-highlight code on my website. But it doesn't support line numbers or zebra-striping (for alternate lines of code).
这是事情。我使用“ Highlight.js”（一种基于javascript的自动语法高亮器）来高亮显示我网站上的代码。但它不支持行号或斑马条纹（用于替代代码行）。
My code block is wrapped in <pre><code>blocks like this:
我的代码块被包裹在这样的<pre><code>块中：
<pre><code>
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</code></pre>
And the output looks like this:
输出如下所示：
Now I want to show line numbers for the code block dynamically using JavaScript. How do I do that? (Also, if possible, how do I show zebra-striping?)
现在我想使用 JavaScript 动态显示代码块的行号。我怎么做？（另外，如果可能的话，我如何显示斑马条纹？）
Thanks.
谢谢。
PS:I don't know JavaScript, so please try to be as clear as possible. I will try my best to understand. Thanks.
PS：我不懂 JavaScript，所以请尽量说清楚。我会尽力去理解。谢谢。
采纳答案by nickw444
You could use an alternate framework such as http://alexgorbatchev.com/SyntaxHighlighter/
您可以使用替代框架，例如http://alexgorbatchev.com/SyntaxHighlighter/
Or take a look here and find something that suites. http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/
或者看看这里，找到适合的东西。 http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/
回答by Simeon Visser
The basic steps would be:
基本步骤是：
- Take the HTML inside the element.
- Split by newline characters (
\n). - For each string, add a number and a dot in front of it.
- Combine the strings again with newline characters.
- Set the string as the HTML of the element.
- 获取元素内的 HTML。
- 按换行符 (
\n)分割。 - 对于每个字符串，在它前面添加一个数字和一个点。
- 再次将字符串与换行符组合在一起。
- 将字符串设置为元素的 HTML。
However, this would mess up the syntax highlighting of the syntax highlighter because it most likely won't recognize that the code has line numbers in front. So the syntax highlighter needs to provide the functionality of line numbers for you.
但是，这会弄乱语法高亮器的语法高亮显示，因为它很可能无法识别代码前面有行号。所以语法高亮需要为你提供行号的功能。
回答by Gordon
Adding a new answer to an old question.
为旧问题添加新答案。
I wanted to display line numbers in the left margin the way ace.js does.
我想像 ace.js 那样在左边距中显示行号。
My solution has some hacky details, but I wanted to share it anyway, because it turns out that absolute-positioned spans within relative-positioned spans work pretty well for this.
我的解决方案有一些棘手的细节，但无论如何我想分享它，因为事实证明相对定位跨度内的绝对定位跨度对此非常有效。
Encouraged by the above answers and this answer about relative positioning without taking up space, I used:
受到上述答案和有关不占用空间的相对定位的答案的鼓舞，我使用了：
var line = 1;
code = code.replace(/^/gm, function() {
return '<span class="line-number-position">​<span class="line-number">' + line++ + '</span></span>';
});
The regular expression /^/gm"replaces" the beginning of each line with the span-within-span.
正则表达式/^/gm用跨度内“替换”每行的开头。
​is a zero-width space, because apparently firefox seems to have trouble deciding whether to put a zero-height span at the top or the bottom of the character.
​是一个零宽度空间，因为显然 firefox 似乎无法决定是在字符的顶部还是底部放置零高度跨度。
line-number-positionand line-numberare CSS classes like these:
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;
}
Yes, there are some magic numbers in there to match ace formatting, but the point is to put a relative-positioned zero-sized span at the beginning of each line and use it as a reference point to add an absolute-positioned span out in the left margin.
是的，那里有一些神奇的数字来匹配 ace 格式，但重点是在每行的开头放置一个相对定位的零大小跨度，并将其用作参考点以添加绝对定位的跨度左边距。
Works on current Chrome, Safari, Firefox, and Opera.
适用于当前的 Chrome、Safari、Firefox 和 Opera。
