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

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

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

引入方法：

　　测试引入是否成功：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. 关于EK Dicnic

    笔记--最大流  $EK$ $Dinic$ $EK$: 运用反向边可以给当前图一次反悔的机会,就是其实现在的增广路并不是最优的,然后就$bfs$找增广路即可 $Dicnic$: 我们发现其实每一次先$ ...

  2. （译）理解python线程

    看到一篇老外写的线程文章,很赞,零基础都能看懂.先贴在这里,有时间再翻译出来. http://agiliq.com/blog/2013/09/understanding-threads-in-pyth ...

  3. 上下文路径request.getContextPath();与${pageContext.request.contextPath}

    (1) request.getContextPath();与${pageContext.request.contextPath}都是获取上下文路径: 1. request.getContextPath ...

  4. Spring mvc 增加静态资源配置后访问不了注解配置的controller

    spring mvc 增加静态资源访问配置. 例如: <!-- 静态资源映射 --> <mvc:resources location="/static/" map ...

  5. 编译 redis 报错 error: jemalloc/jemalloc.h: No such file or directory

    gcc编译redis时报错: zmalloc.h:50:31: error: jemalloc/jemalloc.h: No such file or directory zmalloc.h:55:2 ...

  6. 【BZOJ1879】【SDOI2009】Bill的挑战 [状压DP]

    Bill的挑战 Time Limit: 4 Sec  Memory Limit: 64 MB[Submit][Status][Discuss] Description Input 第一行:一个整数T, ...

  7. 【BZOJ4870】组合数问题 [矩阵乘法][DP]

    组合数问题 Time Limit: 10 Sec  Memory Limit: 512 MB[Submit][Status][Discuss] Description Input 第一行有四个整数 n ...

  8. 【BZOJ】1096 [ZJOI2007]仓库建设

    [算法]DP+斜率优化 [题解]状态转移方程:f[i]=min(f[j]+g(i+1,j-1))+c[i] 关键在于如何O(1)计算g(i+1,j-1). 推导过程:http://blog.csdn. ...

  9. Frogs' Neighborhood（POJ1659+Havel-Hakimi定理）

    题目链接:http://poj.org/problem?id=1659 题目: 题意:根据他给你的每个点的度数构造一张无向图. 思路:自己WA了几发(好菜啊……)后看到discuss才知道这个要用Ha ...

  10. 如何使用webpack打包你的项目

    webpack是前端开发中比较常用的打包工具之一,另外还有gulp,grunt.之前没有涉及过打包这块,这里介绍一下使用webpack打包的流程. Grunt和Gulp的工作方式是:在一个配置文件中, ...