找代码高亮插件选了好久，还是这个使用起来比较方便。

先上链接：插件下载地址 官方使用方法地址

建议看官方的资料，我这里仅仅简要描述一下使用方法：

引入方法：

　　测试引入是否成功：herf 换成 自己放置的路径，打开测试网页源代码，点击css,js文件链接 能看到代码内容即OK。

<link rel="stylesheet" type="text/css" href="prettify.css">

<script type="text/javascript" src="prettify.js"></script>

（下载的文件里还有部分主题，替换一下即可）：

<link rel="stylesheet" type="text/css" href="skins/doxy.css">

<script type="text/javascript" src="prettify.js"></script>

官方给的启用方法是：

<body onload="PR.prettyPrint()">

这种方法无疑是最稳妥的。

我的做法是下面这种做法，（我把body放在模板里了，修改起来不太方便，而且主观意愿上不太像body标题里面加入太多东西）但是需要注意的是务必将js文件的引用放到html的最下面，以防无效。

<script type="text/javascript" src="/prettify.js" onload="PR.prettyPrint();"></script>

代码高亮使用方法：

在<pre> 标签加入 .prettyprint .lang-html类

prettyprint 是渲染类

lang-html指的是编程语言，这里指的是html，其他语言缩写在下方：

<pre class="prettyprint lang-html">

  The lang-* class specifies the language file extensions.

  File extensions supported by default include:

    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",

    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",

    "xsl".

</pre>

提示：kindeditor富文本编辑器已默认自动支持在<pre>标签内加入prettyprint lang-html类

更多方法请参考官方文档：https://github.com/google/code-prettify/blob/master/docs/getting_started.md

:

google code-prettify 代码高亮插件使用方法的更多相关文章

  1. 代码高亮插件Codemirror使用方法及下载

    代码高亮插件Codemirror使用方法及下载 - 老男孩的日志 - 网易博客 代码高亮插件Codemirror使用方法及下载   2013-10-31 16:51:29|  分类: 默认分类 |   ...

  2. OLW （Open Live Writer）安装代码高亮插件方法（简明）

    1.首先下载OLW代码高亮插件,请点击--->OLW代码高亮插件 2.在你安装OLW的目录下(顺便说一下默认的安装目录为C:\Users\你的用户名\AppData\Local\OpenLive ...

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

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

  4. [转]7个高性能JavaScript代码高亮插件

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...

  5. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  6. MarkdownPad2代码高亮插件兼容移动端样式

    如果不知道MarkdownPad2使用代码高亮插件可以查看前一篇文章<MarkdownPad2使用代码高亮插件> 先看移动端效果图: 移动端点击查看效果 或者手机扫如下二维码: 我们经常阅 ...

  7. WordPress代码高亮插件SyntaxHighlighter终极使用详解

    子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...

  8. 代码高亮插件推荐——SyntaxHighlighter++

    SyntaxHighlighter++这个插件的最大的优点就是可以在编辑器的下方有一个输入框,里面可以输入代码,然后插入到文章中.就不用编辑文章的时候,在可视化和文本之间来回切换了.非常适合不熟悉ht ...

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

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

随机推荐

  1. phalcon安装

    参考网站:https://docs.phalconphp.com/zh/latest/reference/tools.html (中文版)cento6.5环境安装:cd ~mkdir phalconc ...

  2. Android数据库资料

    一.联系人和通话记录: 数据库文件/data/data/com.android.providers.contacts/databases/contacts2.db  通话记录的数据存在calls表中; ...

  3. 第三方库升级Nginx

    通过PPA方式,来升级Nginx 1. 添加PPA sudo add-apt-repository ppa:nginx/stable sudo apt-get updatesudo apt-get u ...

  4. 给定一个数字n，不用for循环实现输出数组 [1,2,3,4,...,n]

    一.for循环方式实现输出[1, 2, 3, ..., n] var n = 5; function test(n){ var arr=[]; for( var i = 1; i <= n; i ...

  5. 洛谷 P1722 矩阵 II

    题目背景 usqwedf 改编系列题. 题目描述 如果你在百忙之中抽空看题,请自动跳到第六行. 众所周知,在中国古代算筹中,红为正,黑为负…… 给定一个1*(2n)的矩阵(usqwedf:这不是一个2 ...

  6. SpringBoot Caused by: java.lang.NoClassDefFoundError: org/apache/tomcat/util/descriptor/tld/TldParser

    最近尝试着用spring boot ,页面模版使用的jsp,在pom里配置了对jsp的支持: <dependency> <groupId>org.apache.tomcat.e ...

  7. 【poj3621】最优比率环

    题意: 给定n个点,每个点有一个开心度F[i],每个点有m条单向边,每条边有一个长度d,要求一个环,使得它的 开心度的和/长度和 这个比值最大.n<=1000,m<=5000 题解: 最优 ...

  8. 【bzoj】1927 [Sdoi2010]星际竞速

    [算法]最小费用最大流 [题解]跟滑雪略有类似,同样因为可以重复所以不是最小路径覆盖. 连向汇的边容量为1足矣,因为一个点只会出去一次(路径结束). bzoj 1927 [Sdoi2010]星际竞速 ...

  9. 【BZOJ】2502 清理雪道

    [算法]有源汇上下界最小流 [题解]上下界 初看以为是最小覆盖,发现边可以重复经过,不对. 要求所有边都经过……那就下界为1,上界为inf的可行流. 源汇……S连入度为0的点,T连出度为0的点?(反正 ...

  10. 崩坏3mmd中的渲染技术研究

    http://youxiputao.com/articles/11839 主要是参考该篇文章做一个微小的复盘. 漫反射与高光 文章中的漫反射与高光并不是类似于普通的 resultCol = Diffu ...