javascript - 在nocode类中使用google prettify时如何添加行号?

标签 javascript prettify google-code-prettify

相关How to add line numbers to all lines in Google Prettify?

我正在查看 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,它现在可以工作了。这是最终结果

enter image description here

最佳答案

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/

关于javascript - 在nocode类中使用google prettify时如何添加行号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20832027/

相关文章:

javascript - 为使用 Blob 的 <embed> 或 &lt;iframe&gt; 设置默认另存为名称

html - Google Prettify 削减了我的代码——需要修复

perl - emacs 使用空格而不是制表符对齐正则表达式

javascript - 如何使用 prettify.js 主题?

javascript - HTML 不会呈现代码块

javascript - 如何重新排序异步函数的执行顺序?

javascript - 正则表达式对某些字符给出错误

javascript - 在ckeditor中显示html标签

javascript - "Function"构造函数在 JavaScript 中如何工作?

html - 在 html 中删除 javascript 并自动格式化所有 <code> 和/或 <pre> block