1
Ture 2012-07-15 22:24:12 +08:00 1
不显示行号貌似是因为这个样式:
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 { list-style-type: none } 在chrome的控制台里面把这个样式取消掉行号就出来了。 |
2
Ture 2012-07-15 22:29:34 +08:00
照着bootstrap 官方文档里使用的prettify的css样式弄就好了:
.com { color: #93a1a1; } .lit { color: #195f91; } .pun, .opn, .clo { color: #93a1a1; } .fun { color: #dc322f; } .str, .atv { color: #D14; } .kwd, .linenums .tag { color: #1e347b; } .typ, .atn, .dec, .var { color: teal; } .pln { color: #48484c; } .prettyprint { padding: 8px; background-color: #f7f7f9; border: 1px solid #e1e1e8; } .prettyprint.linenums { -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin: 0 0 0 33px; /* IE indents via margin-left */ } ol.linenums li { padding-left: 12px; color: #bebec5; line-height: 18px; text-shadow: 0 1px 0 #fff; } |
3
cutehalo 2012-07-15 22:34:15 +08:00 1
行号是CSS控制的
写在了bootstrap里面写在了 ol{list-style: decimal;} |
6
Ture 2012-07-15 22:51:02 +08:00
prettify的样式如果是最后加载的,list-style会被重写。
结果就是行号只显示5n...... |
10
alexjavascript 2014-06-28 14:11:30 +08:00
<!DOCTYPE HTML /PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Bootstrap-代码</title> <meta charset="utf-8"> <link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="../css/google-code-prettify/prettify.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../js/bootstrap.js"></script> <script type="text/javascript" src="../css/google-code-prettify/prettify.js"></script> <style>li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }</style> <script type="text/javascript"> $(document).ready(function(){ prettyPrint(); }) </script> </head> <body> <div class="container"> <h1 class="page-header">代码<small><code>与<pre>标签的使用</small></h1> <p>为<code><h1></code>标签添加<code>.page-header</code>,可以为内容添加合适的边距,并且在下方显示一条灰色的边线。</p> <pre class="prettyprint linenums"> <p>示范文本...</p> <p>示范文本...</p> <p>示范文本...</p> </pre> </div> </body> </html> 楼上说了那么多,都被搞晕了,不知道你们是咋弄的...后来在官方文档(地址: http://google-code-prettify.googlecode.com/svn/trunk/README.html)上看到加上这段话就好了。不过这个解决方案不咋好看。 <style>li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }</style> |