这款插件的名字叫做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. ckeditor4.4.6添加代码高亮

    研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.j ...

  4. 使用prismjs为网站添加代码高亮功能

    prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...

  5. 【前端】向blog或网站中添加语法高亮显示代码方法总结

    向blog或网站中添加语法高亮显示的代码方法总结 文章目录 预备知识 目标 第一类方法:嵌入 第二类方法:外部引用 第三类方法:忽略HTML和PHP 最近在写代码时遇到一个问题,就是如何让代码像在ID ...

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

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

  7. [译]MVC网站教程（四）：MVC4网站中集成jqGrid表格插件（系列完结）

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  8. TogetherJS – 酷！在网站中添加在线实时协作功能

    TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...

  9. CKEditor 4.4.1 添加代码高亮显示插件功能--使用官方推荐Code Snippet插件

    随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了Code Snippet这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以 ...

随机推荐

  1. [Beego] 内置的模板函数（不同格式的字符串和html的互转）

    在使用beego框架的时候,常常需要把不同形式的字符串转化为html,有时候为了安全考虑会将html转义,而有时候希望能显示html标签.在存储到db中后,再取出来的显示是原本的,即html标签不会生 ...

  2. C/C++ 笔试题一

    摘自 网络上的 笔试题,据说是华为的,考察的内容还算全面,也很细致: 答案 疏略 检查了下,应该没有什么大问题,但是 还是那句话,尽信之不如无,所以还是要自己思考 1.static有什么用途?(请至少 ...

  3. vue动态 设置类名

    <div class="tab"> <navigator :class="currentTab=='mzfw'?'nav active': 'nav'& ...

  4. Dreamweaver_CS6安装与破解

    Adobe Dreamweaver是一款非常好用的web前端设计工具,这里详细讲解CS6版本的安装及破解步骤.经过测试,CS5版本也可以使用本经验中共享的破解补丁进行破解. 工具/原料 Dreamwe ...

  5. ActionContext介绍（在Struts2中）

    一种属性的有序序列,它们为驻留在环境内的对象定义环境.在对象的激活过程中创建上下文,对象被配置为要求某些自动服务,如同步.事务.实时激活.安全性等等.多个对象可以存留在一个上下文内.也有根据上下文理解 ...

  6. Java 开发手册之编程规约

    一.编程规约 (一) 命名规约 1.[强制] 代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束.(代码规范,易读) 反例: name / __name / $Object / n ...

  7. 提升Apache网站访问速度的优化方法

    Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. 在Apache服务器上怎样优化才能提高 ...

  8. ubutun

    地址:http://www.cnblogs.com/dutlei/archive/2012/11/20/2778327.html

  9. 有关Botton的用法（二）

    关于设置listener监听onClicked事件的步骤分析 Steps: 1.tell android you are interested in listening to a button cli ...

  10. Java基础数据类型二进制转换

    前言: 本文主要介绍java基础类型的二进制转换和二进制的基本概念. 二进制: 1,二进制是以0和1为码,逢2进1,比如3=11=1*2+1. 2,在计算机当中其它进制的算法基本基于2进制,因为计算机 ...