题 如何在Google Prettify的所有行中添加行号?


我正在使用美化:

<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 你可以看到我想要的,但我查看了那段代码,我无法弄明白。


40
2017-12-06 11:59


起源




答案:


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

/* 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;
}

44
2017-12-06 12:06



哈哈,我昨晚花了好几个小时,我应该想到这一点,虽然看来我必须把它从那个样式表中删除但是我并没有把它从我的全球风格中删除。 - 谢谢 - aurel
为什么这是默认的? - Mike Weller
不知道什么时候开始,但我下载的美化副本有一个硬编码路径到CDN上的css文件。所以即使我修改了我的本地副本,它也忽略了它。 - Peter
是的,如果您使用此解决方案,请确保将run_prettify.js函数更改为使用“./prettify.css”而不是“cdn.rawgit.com/google/code-prettify/master/loader/...; - JSideris


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

<style>

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

</style>  

完整示例可能包含以下代码。 通过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>

http://img801.imageshack.us/img801/8498/al6c.png


29
2018-01-01 04:55



这应该是公认的答案。改变CSS有点乱。 - Megacan
我同意。非侵入式答案是首选。 - mjaque
因为这个解决方案适合我,而被接受的答案没有。 - Roberto
可能需要给ol添加左边距以使行号可见 - MOD


我喜欢交替的背景颜色,所以这样做:

/* 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; }

3
2018-01-18 16:37