[Threeperson](http://www.threeperson.com)代码块添加了行号,阅读代码更加清晰,这个也是为了方便后续的评论功能。代码行号样式并不是我写的,本人css资历有限,其实js也是弱的不行,不过拿来即用的本事还是有一点。闲话少说,上代码。
#### 1. 第一步引入pretty css和js
```
<link href="http://cdn.bootcss.com/prettify/r224/prettify.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/prettify/r224/prettify.js"></script>
```
#### 2:第二部引入obsidian-theme css
````
/*
* Derived from einaros's Sons of Obsidian theme at
* http://studiostyl.es/schemes/son-of-obsidian by
* Alex Ford of CodeTunnel:
* http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
*/
.str
{
color: #EC7600;
}
.kwd
{
color: #93C763;
}
.com
{
color: #66747B;
}
.typ
{
color: #678CB1;
}
.lit
{
color: #FACD22;
}
.pun
{
color: #F1F2F3;
}
.pln
{
color: #F1F2F3;
}
.tag
{
color: #8AC763;
}
.atn
{
color: #E0E2E4;
}
.atv
{
color: #EC7600;
}
.dec
{
color: purple;
}
pre.prettyprint
{
border: 0px solid #888;
}
ol.linenums
{
margin-top: 0;
margin-bottom: 0;
}
.prettyprint {
background: #000;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
color: #555;
list-style-type: decimal;
margin-left: 15px;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
background: #111;
}
@media print
{
.str
{
color: #060;
}
.kwd
{
color: #006;
font-weight: bold;
}
.com
{
color: #600;
font-style: italic;
}
.typ
{
color: #404;
font-weight: bold;
}
.lit
{
color: #044;
}
.pun
{
color: #440;
}
.pln
{
color: #000;
}
.tag
{
color: #006;
font-weight: bold;
}
.atn
{
color: #404;
}
.atv
{
color: #060;
}
}
````
#### 3.第三步页面加载pretty
```
$(function(){
prettyPrint();
})
```
#### 第四步 给pre标签添加prettyprint linenums class
恭喜你漂亮的行号已经添加完毕