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

使用该插件之前的效果：

使用插件之后的效果：

接下来说步骤：

（1）下载两个文件

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

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

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

  1. <link href="google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
  2. <script type="text/javascript" src="google-code-prettify/prettify.js"></script>

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

  1. <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打开行号

  1. <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. 手机端可以和PC端同时在线-java QRCode 实现网站扫码登录(即支持同帐号多设备同时登录)

    微信扫码测试地址:: http://sms.reyo.cn 用户名:aa 密码:123456 扫码登录实现方式很多,比如ajax轮询,http长连接(comet...),websocket,event ...

  2. left join 注意事项

    相信对于熟悉SQL的人来说,LEFT JOIN非常简单,采用的时候也很多,但是有个问题还是需要注意一下.假如一个主表M有多个从表的话A B C …..的话,并且每个表都有筛选条件,那么把筛选条件放到哪 ...

  3. Prometheus 初体验

    本文环境 Redhat Linux 6.7, Prometheus 2.2.1,node_exporter 1.5.2 介绍 Prometheus 是2012年由 SoundCloud 开源的系统监控 ...

  4. .NET培训 | JAVA培训 | 最课程

    最课程(www.zuikc.com) 软件开发培训,在线软件培训的创新者!我们的创新在于: 1:一次购买,终身服务.每个最课程学员都会分配一位专职教师及一位监管教师,点对点跟进课程进度,直到您学会课程 ...

  5. 利用Linux的Samba服务模拟NT域

    利用Linux的Samba服务模拟NT域 Samba是一个与Windows NT具有相同协议的软件包.我们可以利用Samba服务来模拟 Windows NT域,使用户从Windows计算机上直接使用一 ...

  6. ORM(Object-Relational Mapping 对象关系映射)如何实现（转）

    原文链接:http://blog.163.com/hzd_love/blog/static/13199988120107891854473/ 1.什么是ORM ORM的全称是Object Relati ...

  7. [leetcode]Symmetric Tree @ Python

    原题地址:https://oj.leetcode.com/problems/symmetric-tree/ 题意:判断二叉树是否为对称的. Given a binary tree, check whe ...

  8. Edit Distance leetcode java

    题目: Given two words word1 and word2, find the minimum number of steps required to convert word1 to w ...

  9. 怎样修改SQL Server 2005/2008的系统存储过程(转)

    我们知道,SQL Server 2005/2008的系统存储过程在正常情况下是无法直接修改的. 尽管本文是介绍怎样修改它的,但在这里,我还是建议大家尽量不要去修改它.(好像有点绕哈...) OK,闲话 ...

  10. NumPy与ndarray简介（转）

    http://blog.csdn.net/u014374284/article/details/45420645 一.NumPy简介 NumPy的全名为Numeric Python,是一个开源的Pyt ...