threeperson
发布于 2016-02-10 / 2 阅读
0
0

给html代码块添加行号

[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

恭喜你漂亮的行号已经添加完毕


评论