这款插件的名字叫做google-code-prettify

使用该插件之前的效果：

使用插件之后的效果：

接下来说步骤：

（1）下载两个文件

http://codecloud.sinaapp.com/google-code-prettify/prettify.css

http://codecloud.sinaapp.com/google-code-prettify/prettify.js

（2）在head中引入这两个文件

<link href="google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />

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

（3）在body加上onload=”prettyPrint()

<body onload="prettyPrint()">...</body>

（4）把代码放进<pre>...</pre> 或者 <code>...</code> 就能够实行代码高亮了。你也能够指定一种语言，class=”prettyprint
Lang-html”。在lang- 后加入下面不论什么一种语言。“bash”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, ”java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, ”xhtml”, “xml”, “xsl”

（5）打开行号
你能够使用linenums打开行号

<pre class=”prettyprint linenums Lang-html”>

bootstrap设计站点中加入代码高亮插件的更多相关文章

  1. bootstrap设计网站中添加代码高亮插件

    这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/ ...

  2. Word中使用代码高亮插件

    Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010 ...

  3. bootstrap设计站点中加入�代码高亮插件

    这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/ ...

  4. 7个高性能JavaScript代码高亮插件

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...

  5. [转]7个高性能JavaScript代码高亮插件

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...

  6. 代码高亮插件推荐——SyntaxHighlighter++

    SyntaxHighlighter++这个插件的最大的优点就是可以在编辑器的下方有一个输入框,里面可以输入代码,然后插入到文章中.就不用编辑文章的时候,在可视化和文本之间来回切换了.非常适合不熟悉ht ...

  7. open live write 代码高亮插件的配置和使用

    第一步:下载open live writer插件,下载地址:http://www.cnblogs.com/memento/p/5995173.html 第二步:找到open live writer的安 ...

  8. 一款代码高亮插件 -- SyntaxHighlighter

    SyntaxHighlighter 是当前用得最多的一款代码高亮插件,包括本博客也用到了该插件来显示代码,大家可以看到效果了.只不过这是针对WordPress的一款代码高亮插件,而今天我要给大家介绍的 ...

  9. WordPress代码高亮插件SyntaxHighlighter终极使用详解

    子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...

随机推荐

  1. UITextField的简易封装

    UITextField的简易封装 效果 源码 https://github.com/YouXianMing/UI-Component-Collection 中的 UITextFieldView // ...

  2. Android之录音工具类

    /** * 录音工具类 * * @author rendongwei * */ public class RecordUtil { private static final int SAMPLE_RA ...

  3. Swift3.0：NSURLConnection的使用

    一.介绍 应用中也不必不可少的会使用网络通信,增强客户端和服务器的交互,可以使用NSURLConnection实现http通信. NSURLConnection提供了异步请求和同步请求两种请求方式.同 ...

  4. Server 2008 R2大改造变成梦幻Win7系统

    在此之前先补充一下知识Windows Server 2008和Windows Server 2008 R2的不同之处Windows Server 2008是基准与Vista的内核构建的,支持X86框架 ...

  5. Maximum Submatrix & Largest Rectangle

    相关题型 问题一(最大和子矩阵) : 有一个 m x n 的矩阵,矩阵的元素可正可负.请找出该矩阵的一个子矩阵(方块),使得其所有元素之和在所有子矩阵中最大.(问题来源:http://acm.pku. ...

  6. JavaScript类的写法

    js类的基本含义 我们知道,在js中,是没有类的概念的.类的所有实例对象都从同一个原型对象上继承属性,因此,原型对象是类的核心. 类是对象的抽象,而对象是类的具体实例.类是抽象的,不占用内存,而对象是 ...

  7. Java设计模式（六）合成模式 享元模式

    (十一)合成模式 Composite 合成模式是一组对象的组合,这些对象能够是容器对象,也能够是单对象.组对象同意包括单对象,也能够包括其它组对象,要为组合对象和单对象定义共同的行为.合成模式的意义是 ...

  8. Android -- 在xml文件中定义drawable数组

    Xml <string-array name="images"> <item>@drawable/image1</item> <item& ...

  9. Delphi获取默认打印机名称及端口

    Delphi获取默认打印机名称及端口 在前段时间写的收银系统中由于目前市场上很多电脑主板上已经没有并口,而POS机却又需要并口,所以目前需要用PCI转接卡,这个就导致不同门店使用的端口就有可能不同,这 ...

  10. 论文列表——text classification

    https://blog.csdn.net/BitCs_zt/article/details/82938086 列出自己阅读的text classification论文的列表,以后有时间再整理相应的笔 ...