在对我的网站改版过程中，发现博文中的代码有些比较多。这时候除了代码高亮之外，还需要显示行号。

代码高亮我使用prettify.js，这个是我用得感觉比较顺手的。而且还有很多样式可以选择。

使用比较简单，我就不介绍了。本篇博文主要说prettify.js显示行号问题。

根据官方文档介绍，除了给pre标签加prettyprint类名之外，还要加入linenums类名即可。

但我测试了一下，发现并没有出现行号。

在浏览器按F12查看css代码，发现加入linenums类名之后，pre中的每一行都解析成li。格式如下：

<pre class="prettyprint linenums prettyprinted">
    <ol class="linenums">
        <li class="L0">...</li>
        <li class="L1">...</li>
        <li class="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行）。

具体效果就不用我截图了，你已经可以从本文的代码看到效果。

上一篇：Excel工作表按照表名排序

下一篇：我的网站搭建(第34天) 页面改版：博文排序