prettify.js代码高亮显示行号问题
在对我的网站改版过程中，发现博文中的代码有些比较多。这时候除了代码高亮之外，还需要显示行号。
代码高亮我使用prettify.js，这个是我用得感觉比较顺手的。而且还有很多样式可以选择。
使用比较简单，我就不介绍了。本篇博文主要说prettify.js显示行号问题。
根据官方文档介绍，除了给pre标签加prettyprint类名之外，还要加入linenums类名即可。
但我测试了一下，发现并没有出现行号。
在浏览器按F12查看css代码，发现加入linenums类名之后，pre中的每一行都解析成li。格式如下：
<pre class="prettyprint linenums prettyprinted">
<olclass="linenums">
<liclass="L0">...</li>
<liclass="L1">...</li>
<liclass="L2">...</li>
</ol>
</pre>
我检查ol标签最终的样式，发现list-style-type属性为none。额…好吧。这是在我的样式全局统一设置中，把ol标签的list-style-type设置为none。
我把ol标签的list-style-type:none去掉，发现还是没有显示行号。
最后发现还是全局CSS设置中，把ol和其他标签统一设置了margin和padding为0，导致看不到行号。这种设置在CSS是很常见的。
给ol加上如下设置即可：
ol{
list-style-type:decimal;
padding-left: 3em;
}
但最好不要直接在你自己的样式文件中添加设置，耦合性有点高。最好修改prettify.js的CSS文件。
好在，Google写的CSS文件很简单，很容易修改。
我修改如下，原本的设置若去掉的，我将其注释掉。
/* desert scheme ported from vim to google prettify */
pre .str { color: #d14 } /* string - pink */
pre .kwd { color: #a61717; font-weight: bold }
pre .com { color: #999988; /*font-style: italic;*/ } /* comment - skyblue */
pre .typ { color: #009999 } /* type - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #a61717 } /* punctuation */
pre .pln { color: #000000 } /* plaintext */
pre .tag { color: #000080; font-weight: bold } /* html/xml tag - lightyellow */
pre .atn { color: #008080; font-weight: bold } /* attribute name - khaki */
pre .atv { color: #d14 } /* attribute value - pink */
pre .dec { color: #009999 } /* decimal - lightgreen */
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
list-style-type:decimal; padding-left: 3em; /*在这里添加这两句，避免影响到其他地方的样式*/
margin-top: 0; margin-bottom: 0; color: #AEAEAE;
}
/*注释，令其显示全部行号*/
/*li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }*/
/* Alternate shading for lines */
/*li.L1,li.L3,li.L5,li.L7,li.L9 { }*/
@media print {
pre.prettyprint { background-color: none }
pre .str, code .str { color: #060 }
pre .kwd, code .kwd { color: #006; font-weight: bold }
pre .com, code .com { color: #600; /*font-style: italic*/ }
pre .typ, code .typ { color: #404; font-weight: bold }
pre .lit, code .lit { color: #044 }
pre .pun, code .pun { color: #440 }
pre .pln, code .pln { color: #000 }
pre .tag, code .tag { color: #006; font-weight: bold }
pre .atn, code .atn { color: #404 }
pre .atv, code .atv { color: #060 }
}
该文件是基于github.css样式文件修改的，若你基于其他样式文件，可能颜色值不同而已。我修改了3个地方如下：
1、去掉.com类的斜体，这个类会应用到代码的注释中（第4行、第28行）；
2、去掉li.L0等设置，令其显示全部行号（第20行、第22行）；
3、在ol.linenums中添加设置行号的样式（第16行）。
具体效果就不用我截图了，你已经可以从本文的代码看到效果。
版权声明：本文为杨仕航
原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。