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

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

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

引入方法：

　　测试引入是否成功：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. python高效学习路线图

  2. 【树状数组】【P3608】平衡的照片

    传送门 Description FJ正在安排他的N头奶牛站成一排来拍照.(1<=N<=100,000)序列中的第i头奶牛的高度是h[i],且序列中所有的奶牛的身高都不同. 就像他的所有牛的 ...

  3. linux上修改系统默认语言设置

    locale命令设置语言环境(临时修改) [keysystem@localhost ~]$ date Fri Feb :: CST [keysystem@localhost ~]$ locale LA ...

  4. 基于DCT系数的实时监控中运动目标检测

    本文的主要内容来自2009 Advanced Video and Signal Based Surveillance会议的一篇论文“Real-Time Moving Object Detection ...

  5. springboot初学

    首先苦于用ssh.ssm来搭建一个项目,这个基础搭建工作就大概要用半天的功夫才能弄好,想到就头疼,后面听了实验室一位大神的建议,用springboot啊,简单的不止一点点.就顺便学习了下这个神器,果然 ...

  6. Zabbix Server端配置文件

    Zabbix Server端配置文件说明 # This is a configuration file for Zabbix Server process # To get more informat ...

  7. Spring Filter过滤器,Spring拦截未登录用户权限限制

    转载自:http://pouyang.iteye.com/blog/695429 实现的功能:判断用户是否已登录,未登录用户禁止访问任何页面或action,自动跳转到登录页面.  比较好的做法是不管什 ...

  8. ZooKeeper内部构件

    引言 这个文档包含关于ZK内部工作的信息.目前为止,它讨论了这些主题: 原子广播 日志 原子传播 ZK的核心是一个原子的通信系统,它使所有的服务端保持同步. 保证.属性和定义 通过使用ZooKeepe ...

  9. uva 10683 Fill

    https://vjudge.net/problem/UVA-10603 题意: 倒水问题,输出最少的倒水量和目标水量 如果无解,目标水量就是尽可能接近给定点的目标水量,但不得大于给定的目标水量 推推 ...

  10. 【BZOJ】1270 [BeijingWc2008]雷涛的小猫

    [算法]DP [题解]f1[i]表示第i棵树当前高度能得到的最多果子数 f2[i]表示高度i能得到的最多果子数. 于是有: f1[j]=max(f1[j],f2[i+delta])+mp[j][i]; ...