这款插件的名字叫做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. （一）java概述

    1.Java1995年斯坦福大学网络公司推出的一门高级语言.一种面向网络,完全的面向对象,完全可靠跨平台的语言.      java:一种面向对象的高级语言           将现实生活中的事物以及 ...

  2. linux C使用strerror来追查错误信息

    最近工作中有个需求:程序将文件进行处理,然后将处理完毕的文件挪走.我用了rename函数来挪动文件,可是在docker化的环境中,文件却无法挪动.不知道什么原因.现在,对程序进行调整,如果rename ...

  3. java RE（正则表达式）

    验证姓名,邮箱,手机号,密码 import java.util.regex.Pattern; /** * 账户相关属性验证工具 * */ public class AccountValidatorUt ...

  4. SqlServer 数据库读写分离【转】

    1. 实现原理:读写分离简单的说是把对数据库读和写的操作分开对应不同的数据库服务器,这样能有效地减轻数据库压力,也能减轻io压力.主数据库提供写操作,从数据库提供读操作,其实在很多系统中,主要是读的操 ...

  5. 【WCF安全】使用X509证书自定义验证

    接触WCF时间比较短,在项目中要使用X509证书,纠结好几天终于有了结论,因此为了方便日后查阅和园友交流特意单独将部分代码提出,并做以记录. 1.准备工作 制作X509证书,此处用到三个证书名称 导入 ...

  6. 一次SQL Server 10054 Troubleshooting

    问题 对某个库新增了一个订阅节点,然后需要把一些应用切到新订阅库,以分散负载.当应用切换后,有一个应用每次启动不到30秒,总是报超时的错误,而error log中又没有任何记录: Timeout ex ...

  7. log4j及其log4j2的使用

    简单的说 log4j2 是log4j2的升级版,据说采用了一些新技术(无锁异步.等等),使得日志的吞吐量.性能比log4j 1.x提高10倍,并解决了一些死锁的bug,而且配置更加简单灵活.其使用方式 ...

  8. Oracle cursor_sharing 参数 详解

    一. 官网的说明 http://download.oracle.com/docs/cd/E11882_01/server.112/e17110/initparams042.htm#REFRN10025 ...

  9. 经典ARP协议讲解，一定要看

    以太网协议是目前最流行的通信协议之一.从底层到高层协议家族非常庞大.今天为您介绍一下经常用到却比一定知道的协议. 在链路层上,主机和路由器用他们的物理地址来标志,即48位的物理地址,也是是我们通常所说 ...

  10. Intent使用方法

    显示Intent 通过构造函数的重载,创建Intent对象,并用startActivity()启动目标活动. 目标活动需要在AndroidManifest.xml中注册 ...... Intent i ...