在对我的网站改版过程中,发现博文中的代码有些比较多。这时候除了代码高亮之外,还需要显示行号。
代码高亮我使用 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 行)。
具体效果就不用我截图了,你已经可以从本文的代码看到效果。
来源: