bootstrap结合google code prettify的问题

发现prettify不能显示行号，于是上网找了解决方法:

只使用prettify的js的文件，不使用css文件，另外添加这段css：

 1 .com { color: #93a1a1; }
 2 .lit { color: #195f91; }
 3 .pun, .opn, .clo { color: #93a1a1; }
 4 .fun { color: #dc322f; }
 5 .str, .atv { color: #D14; }
 6 .kwd, .linenums .tag { color: #1e347b; }
 7 .typ, .atn, .dec, .var { color: teal; }
 8 .pln { color: #48484c; }
 9 
10 .prettyprint {
11 padding: 8px;
12 background-color: #f7f7f9;
13 border: 1px solid #e1e1e8;
14 }
15 .prettyprint.linenums {
16 -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
17 -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
18 box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
19 }
20 
21 /* Specify class=linenums on a pre to get line numbering */
22 ol.linenums {
23 margin: 0 0 0 33px; /* IE indents via margin-left */
24 } 
25 ol.linenums li {
26 padding-left: 12px;
27 color: #bebec5;
28 line-height: 18px;
29 text-shadow: 0 1px 0 #fff;
30 }

View Code

这里bootstrap使用2.3.2的

完整代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
 7 
 8 <!--[if lt IE 9] >
 9     <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
10 <![endif]-->
11 <title>bootstrap</title>
12 <style>
13 body {
14     
15 }
16 
17 @media ( max-width :767px) {
18     body {
19         background: #ccc;
20     }
21 }
22 .com { color: #93a1a1; }
23 .lit { color: #195f91; }
24 .pun, .opn, .clo { color: #93a1a1; }
25 .fun { color: #dc322f; }
26 .str, .atv { color: #D14; }
27 .kwd, .linenums .tag { color: #1e347b; }
28 .typ, .atn, .dec, .var { color: teal; }
29 .pln { color: #48484c; }
30 
31 .prettyprint {
32 padding: 8px;
33 background-color: #f7f7f9;
34 border: 1px solid #e1e1e8;
35 }
36 .prettyprint.linenums {
37 -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
38 -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
39 box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
40 }
41 
42 /* Specify class=linenums on a pre to get line numbering */
43 ol.linenums {
44 margin: 0 0 0 33px; /* IE indents via margin-left */
45 } 
46 ol.linenums li {
47 padding-left: 12px;
48 color: #bebec5;
49 line-height: 18px;
50 text-shadow: 0 1px 0 #fff;
51 }
52 </style>
53 </head>
54 <body onload="prettyPrint()">
55     <div class="container">
56         <h1 class="page-header">
57             练习<small>bootstrap</small>
58         </h1>
59         <div class="row">
60             <pre class="prettyprint linenums">
61 &lt;div class=&quot;span4&quot;&gt;
62     &lt;h2 class=&quot;page-header&quot;&gt;练习bootstrap&lt;/h2&gt;
63     &lt;p&gt;123213123213231&lt;/p&gt;
64 &lt;/div&gt;
65             </pre>
66         </div>
67     </div>
68     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
69     <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
70     <script type="text/javascript" src="google-prettify/prettify.js"></script>
71 </body>
72 </html>

View Code

效果：