这款插件的名字叫做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. 如何在Open Live Writer(OLW)中使用precode代码高亮Syntax Highlighter

    早先Microsotf的Windows Live Writer(WLW)现在已经开源了,并且更名为Open Live Writer,但是现在Windows Live Writer还是可以现在,Open ...

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

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

  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. C#窗体内嵌外部程序(cmd.exe)的显示【转载】

    [DllImport("User32.dll ", EntryPoint = "SetParent")] private static extern IntPt ...

  2. Could not apply the stored configuration for monitors

    在用户目录下$user.home/.config/monitors.xml,要解决上面的问题,最简单的办法就是删除这个monitors.xml文件,重启一下电脑

  3. python网页下载

    python 2.7版本下可以运行 import urllib2 def getHtml(url): response = None requset = None headers = {'User-A ...

  4. SQL必知必会 -------- 聚集函数、分组排序

    聚集函数 1.AVG()函数 输入:SELECT AVG(prod_price) AS avg_price FROM Products 输出: 警告:只用于单个列AVG()只能用来确定特定数值列的平均 ...

  5. 洛谷P3639 [APIO2013] 道路费用 [生成树的特殊算法]

    题目传送门 道路费用 格式难调,题面就不放了. 分析: 这是一道要细(yan)心(jing)的生成树的好(gui)题. 首先我们看到$k$的范围非常小,那么我们就可以直接$2^k$枚举每一条加边是否选 ...

  6. Redux学习之我对于其工作流程的理解和实践

      目录 1 工作流程图 2 各部位职责 3 Demo   1 工作流程图   2 各部位职责 我在理解这个流程图的时候,采用的是一种容易记住的办法,并且贴切实际工作职责. 我们可以把整个Redux工 ...

  7. Python开发基础-Day31 Event对象、队列和多进程基础

    Event对象 用于线程间通信,即程序中的其一个线程需要通过判断某个线程的状态来确定自己下一步的操作,就用到了event对象 event对象默认为假(Flase),即遇到event对象在等待就阻塞线程 ...

  8. 选择器(UIPickerView)

    Apple提供了两种形式的选择器:日期选择器(UIDatePicker)与自定义选择器(UIPickerView). 当用户使用日期选择器选定一个时间后,调用datePickerID.date可以直接 ...

  9. CodeForces - 1016C Vasya And The Mushrooms

    题面在这里! 好久没有体会这种A题的快感了23333 一开始看错了,以为权值是从1开始的,不过这样不要紧,最后把算的答案减去两行数的和就是正确的答案了. 然后发现位于一个角上的时候,我们其实只有两种选 ...

  10. WordPress插件会员简化1.58 -任意文件下载漏洞（附poc）

    今天我们将讨论在WordPress插件WordPress插件与重点会员简化v1.58作为这个剧本的创作时间不打补丁的扶贫开发实践.脆弱脚本如下: CVE-ID:cve-2017-1002008 当然, ...