这款插件的名字叫做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. Mapreduce shuffle和排序

    Mapreduce为了确保每个reducer的输入都按键排序.系统执行排序的过程-----将map的输出作为输入传给reducer 称为shuffle.学习shuffle是如何工作的有助于我们理解ma ...

  2. 重温CLR（六）方法和参数

    实例构造器和类(引用类型) 构造器是将类型的实例初始化为良好状态的特殊方法.构造器方法在“方法定义元数据表”中始终叫做.ctor(constructor的简称).创建引用类型的实例时,首先为实例的数据 ...

  3. CH1801 括号画家（栈模拟）

    描述 Candela是一名漫画家,她有一个奇特的爱好,就是在纸上画括号.这一天,刚刚起床的Candela画了一排括号序列,其中包含小括号( ).中括号[ ]和大括号{ },总长度为N.这排随意绘制的括 ...

  4. 1.2 java web的发展历史

    前言 了解java web的发展历史和相关技术的演进历程,非常有助于加深对java web技术的理解和认识. 阅读目录 1.Servlet的出现 2.Jsp的出现 3.倡导了MVC思想的Servlet ...

  5. homebrew的安装与使用

    homebrew的安装:http://jingyan.baidu.com/article/fec7a1e5ec30341190b4e7e5.html 引用segfaultment上面的回答 没这个说法 ...

  6. Indy发送邮件被kbas退掉

    用indy开发了发送邮件程序,通过126,sina等发送邮件可以发送出去,而通过tom,163则被退回,显示被 kbas系统退回．后来通过观察Foxmail的通讯过程,区别在foxmail发送EHLO ...

  7. 在laravel中使用支付宝手机网站支付 和 支付宝退款

    1.在蚂蚁金服开放平台中申请对应的应用,并根据提示进行签约 2.给对应的应用信息 生成私钥和公钥(私钥会保存在本地,公钥会放在对应的应用信息中) 3.下载手机网站支付 对应的php sdk 4.将sd ...

  8. AIX rcp跨主机远程

    rcp用途:在本地主机和远程主机之间或者两个远程主机之间传输文件.详细用法可man rcp查看. 现在要把主机10.200.5.200的/tmp/work.sh(属主为root用户)拷贝到远程主机18 ...

  9. 【转】配置Jmeter的自定义参数

    配置Jmeter的自定义参数 User Defined Variables 在这个控件中,定义你所需要的参数,如 在对应的需要使用参数的位置,使用${host}替代. 应用场景: 当测试环境变化时,我 ...

  10. PHP统计排行，分页

    1.分页参数 count 总数 firstRow   起始行 listRows   每一次获取记录数 list          每一页的记录(要与count对应一致就行) 2.分页对象 可以针对真实 ...