prettify.js代码高亮显示行号问题

  • 发布时间:2016年11月11日 10:22
  • 作者:杨仕航
  • 分类标签: Web前端
  • 阅读(9639)
  • 评论(0)

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

代码高亮我使用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天) 页面改版:博文排序

评论列表

智慧如你,不想发表一下意见吗?

新的评论

清空