如何将行号添加到 Google Prettify 中的所有行？答案

【问题标题】：How to add line numbers to all lines in Google Prettify?如何将行号添加到 Google Prettify 中的所有行？
【发布时间】：2012-01-14 00:48:18
【问题描述】：

我正在使用美化：

<pre class="prettyprint linenums">
  some code
</pre>

它可以工作，但行号每 5 行显示一次，而不是每行显示一次。我正在使用这些文件

<link href="../src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../src/prettify.js"></script>

基本上在本页末尾http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html 你可以看到我想要的，但是我查看了那个代码，我无法弄清楚。

【问题讨论】：

标签： javascript css prettify

【解决方案1】：

根本原因是prettify.css中的list-style-type: none：

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none /* <<< THIS is the cause! */ }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

您可以删除该规则或使用以下命令覆盖它：

.linenums li {
    list-style-type: decimal;
}

【讨论】：

哈哈，我昨晚花了几个小时，我应该想到这一点，虽然看起来我必须从那个样式表中删除它，但我没有从我的全局样式中删除它。 - 谢谢
为什么这是默认设置？
不确定何时开始，但我下载的 prettify 副本在 CDN 上有一个 css 文件的硬编码路径。因此，即使我修改了本地副本，它也会忽略它。
是的，如果您使用此解决方案，请确保将 run_prettify.js 函数更改为使用“./prettify.css”而不是“cdn.rawgit.com/google/code-prettify/master/loader/prettify.css”

【解决方案2】：

解决方案

您可以简单地添加一行 CSS 来实现所需的行为，而不是修改 CSS：

<style>

    .prettyprint ol.linenums > li { list-style-type: decimal; }

</style>

示例

一个完整的例子可能有下面的代码。 View results via jsfiddle 或见下文

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" />

    <style>
        .prettyprint ol.linenums > li { list-style-type: decimal; }
    </style>

<pre class="prettyprint linenums">
 foo
 bar
 bis
 sed
 awk
 cat
</pre>


<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js"></script>

【讨论】：

这应该是公认的答案。更改 css 有点乱。
我同意。首选非侵入性的答案。
投了赞成票，因为这个解决方案对我有用，而接受的答案却没有。
可能需要为 ol 提供左填充以使行号可见

【解决方案3】：

我喜欢交替的背景颜色，所以这样做：

/* White background color for all even-numbered lines */
li.L0,
li.L2,
li.L4,
li.L6,
li.L8  { background-color: #fff; }
/* Light-gray background color for all odd-numbered lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background-color: #eee; }

【讨论】：