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

只使用prettify的js的文件，不使用css文件，另外添加这段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;

 }

这里bootstrap使用2.3.2的

完整代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />

 <!--[if lt IE 9] >

     <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

 <![endif]-->

 <title>bootstrap</title>

 <style>

 body {

 }

 @media ( max-width :767px) {

     body {

         background: #ccc;

     }

 }

 .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;

 }

 </style>

 </head>

 <body onload="prettyPrint()">

     <div class="container">

         <h1 class="page-header">

             练习<small>bootstrap</small>

         </h1>

         <div class="row">

             <pre class="prettyprint linenums">

 &lt;div class=&quot;span4&quot;&gt;

     &lt;h2 class=&quot;page-header&quot;&gt;练习bootstrap&lt;/h2&gt;

     &lt;p&gt;123213123213231&lt;/p&gt;

 &lt;/div&gt;

             </pre>

         </div>

     </div>

     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

     <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

     <script type="text/javascript" src="google-prettify/prettify.js"></script>

 </body>

 </html>

效果：

bootstrap结合google code prettify的问题的更多相关文章

  1. 五、Google Code Prettify：实现代码高亮的JS库

    介绍 code prettify 解释为 “代码修饰”. 他由JS代码和CSS代码构成,用来高亮显示HTML页面中的代码. 支持:C, Java, Python, Bash, HTML, XML, J ...

  2. 使用 Google Code Prettify 实现代码高亮

    今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示,以前我使用 highlight.js 来实现文章中代码的高亮显示. prettify 非常小巧且配置简单,使用 ...

  3. Google Code Pretiffy 代码 着色 高亮 开源 javascript（JS）库

    1.简介 introduction Google Code Pretiffy 是 Google 的一个用来对代码进行语法着色的 JavaScript 库,支持 C/C++, Java, Python, ...

  4. bootstrap之google fonts

    bootstrap之google fonts 在学习一个bootstrap时,看到了一行引用代码:@import url(http://fonts.googleapis.com/css?family= ...

  5. svn import 向Google code里导入初始代码

    其实很简单的问题,花费了这么多时间,想把初始代码导入到Google code里,用VisaulSVN插件的Switch功能也不可以,Google code上虽然有上传,但是只能单个文件传...... ...

  6. 使用Google Code和客户端TortoiseSVN 工具搭建一个在线源代码版本控制系统

    把代码放在Google Code里,客户端还是使用TortoiseSVN ,就可以很方便地在家里和办公室协调工作了,不用再用U盘把代码拷来拷去了. 搭建过程: 1.注册一个google账户:https ...

  7. Google code: Why ‘Everything up-to-date’ when pushing (git)

    原文链接:http://blog.rexzhao.com/2011/11/28/google-code-git-everything-up-to-date-when-push.html 第一次在Goo ...

  8. google code 上传源码

    在使用google code 的时候 做个备份, git clone https://wushuangzilong@code.google.com/p/maplebanana-proxy/ git c ...

  9. Google Code项目代码托管网站上Git版本控制系统使用简明教程

    作为一个著名的在线项目代码托管网站,Google Code目前主要支持三种版本控制系统,分别为Git, Mercurial和 Subversion.Subversion即SVN相信大家都已经熟知了,这 ...

随机推荐

  1. Caffe学习--Net分析

    Caffe_Net 1.基本数据 vector<shared_ptr<Layer<Dtype> > > layers_; // 记录每一层的layer参数 vect ...

  2. Incomplete types-不完全类型

    另外:前向声明中引入的类型为不完全类型(incomplete type),不完全类型只能以有限方式使用,只能用于定义指向该对象的指针和引用,只能用于声明使用该类型作为形参或返回类型的函数. Incom ...

  3. 来，我们来聊聊怎么学好3dMax三维建模这款软件

    效果图公司近年来的发展体现了流行3D技术,而3D技术的应用也越来越广泛,3D为电脑效果图制作的主力.室内效果是设计师进行设计后所达到的效果,除了通常采用的方法外,还应该积极地找寻一种适合的教学方法,培 ...

  4. 注解@SuppressWarnings

    在JAVA中注解@SuppressWarnings("deprecation")的Deprecation是什么意思 过期的 @SuppressWarnings("depr ...

  5. （noip模拟二十一）【BZOJ2500】幸福的道路-树形DP+单调队列

    Description 小T与小L终于决定走在一起,他们不想浪费在一起的每一分每一秒,所以他们决定每天早上一同晨练来享受在一起的时光. 他们画出了晨练路线的草图,眼尖的小T发现可以用树来描绘这个草图. ...

  6. LVM的创建与挂载

    LVM的诞生: 由于传统的磁盘管理不能对磁盘进行磁盘管理,比如我把/dev/sdb1挂载到了/liu目录下,但是因为数据量过大的原因,此文件系统磁盘利用率已经高达98%,那么我可以直接对这个磁盘进行扩 ...

  7. caioj 1114 树形动态规划（TreeDP）3.0：多叉苹果树【scy改编ural1018二叉苹果树】

    一波树上背包秒杀-- #include<cstdio> #include<cstring> #include<algorithm> #include<vect ...

  8. 紫书 例题8-9 UVa 1451 （数形结合）

    这道题用了数形结合, 真的牛逼, 完全想到不到还可以这么做 因为题目求的是平均值, 是总数除以个数, 这个时候就可以联系 到斜率, 也就是说转化为给你一堆点, 让你求两点之间的最大斜率 要做两个处理 ...

  9. Oracle with as 嵌套

    oracle  with as可以理解为临时视图,可以极大的简化sql语句,并且支持嵌套使用. With c3 As(Select * From v_tr_daily Where p_date=to_ ...

  10. 2019年北航OO第一单元（表达式求导任务）总结

    2019面向对象课设第一单元总结 一.三次作业总结 1. 第一次作业 1.1 需求分析 第一次作业的需求是完成简单多项式导函数的求解,表达式中每一项均为简单的常数乘以幂函数形式,优化目标为最短输出.为 ...