在 nocode 类中使用 google prettify 时如何添加行号？答案

【问题标题】：How to add line numbers when using google prettify in the nocode class?在 nocode 类中使用 google prettify 时如何添加行号？
【发布时间】：2013-12-30 01:15:58
【问题描述】：

我正在查看 google 的 http://code.google.com/p/google-code-prettify/ 以在网页中显示我用 Mathematica 编写的代码。

Mathematica 不是支持的语言。所以，甚至认为我可以做到以下几点

<pre class="prettyprint linenums">
Manipulate[
 tick;
 Module[{a1, a2, a3, v1, v2, v3, h1, a1d, a2d, a3d, z},
]
</pre>

这在显示行号方面有效，但使用的语法突出显示已关闭，并且对于我使用的语言不正确，因为我理解它当然不受支持。

我很乐意仅列出代码，使用 nocode 类，没有突出显示，但我也希望能够获得行号。所以，我尝试了这个：

<pre class="prettyprint linenums"> 
<span class="nocode">  <!-- also tried <span class="nocode linenums"--->
Manipulate[
 tick;
 Module[{a1, a2, a3, v1, v2, v3, h1, a1d, a2d, a3d, z},
</span>
</pre>

但行号不会显示在 nocode 类中。

有没有办法修改prettify.js 并使其也显示nocode 的行号？我主要是用它来列出代码，但需要看行号。

这是一个完整的 MWE

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/> 
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</head>
<body onload="prettyPrint()">        

<pre class="prettyprint linenums">
<span class="nocode linenums">
Manipulate[
 tick;
 Module[{a1, a2, a3, v1, v2, v3, h1, a1d, a2d, a3d, z},

  Which[state == "init" || state2 == "on",
   state2 = "off";
   If[state == "init", state = "paused"];  
 state == "running" || state == "step",
   If[currentTime > maxTime, currentTime = 0]
   ]; 
]
</span>
</pre>

</body>
</html>

更新

感谢 Gaby，它现在正在运行。这是最终结果

【问题讨论】：

标签： javascript prettify google-code-prettify

【解决方案1】：

将nocode 类放在pre 元素上..

<pre class="prettyprint linenums nocode">

演示地址 http://jsfiddle.net/gaby/8Jwja/1/

更新

要显示所有数字（并在数字后不带点显示它们），您必须覆盖 CSS

添加

ol.linenums{
    counter-reset:linenumber;
}
ol.linenums li{
    list-style-type:none;
    counter-increment:linenumber;
}
ol.linenums li:before{
    content: counter(linenumber);
    float:left;
    margin-left:-4em;
    text-align:right;
    width:3em;
}

演示地址 http://jsfiddle.net/gaby/8Jwja/2/

【讨论】：

谢谢，效果很好。你会不会碰巧知道，如何让它显示没有小数点的行号？正如我在上面的屏幕截图中显示的那样？如果没有，没问题。谢谢。
哇！效果很好。您可能希望将此发送到 google 的 code.google.com/p/google-code-prettify，以便让默认设置像这样工作。在行号旁边有一个小数点不是一个好主意。再次感谢。