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

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

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

引入方法：

　　测试引入是否成功：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. Poco::Path 和 DirectoryIterator

    #include<iostream>#include<typeinfo>#include<Poco/Path.h>using namespace std;using ...

  2. UIColor延伸：判断两个颜色是否相等

    不管UIColor使用CIColor,CGColor还是其他方式初始化的,其CGColor属性都是可用的.CoreGraphics中提供一个函数,用于判断两个CGColor是否相等,因此我们可以通过这 ...

  3. dubbo介绍以及创建

    1.什么是dubbo? DUBBO是一个分布式服务框架(关于框架,其实就是配置文件加java代码),致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2 ...

  4. Java并发编程学习笔记

    Java编程思想,并发编程学习笔记. 一.基本的线程机制 1.定义任务:Runnable接口 线程可以驱动任务,因此需要一种描述任务的方式,这可以由Runnable接口来提供.要想定义任务,只需实现R ...

  5. c# 深拷贝与浅拷贝的区别分析及实例

    浅拷贝(影子克隆):只复制对象的基本类型,对象类型,仍属于原来的引用. 深拷贝(深度克隆):不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的. 深拷贝是指源对象与拷贝对象互相独 ...

  6. 解决华为手机用rem单位，内容超出屏幕宽度问题

    在H5手机页面上,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所有的px全都换算成了rem单位来写,优点是能适配各种不同屏 ...

  7. Spring知识点复习

    Spring知识点复习 一.专业术语 侵入式设计 引入框架,对现有的类的结构有影响,即需要实现或继承某些特定类.如:Struts框架 非侵入式设计 引入框架,对现有的类结构没有影响.如:Hiberna ...

  8. EasyUI Tree递归方式获取JSON

    最近需要用到EASYUI中的TREE功能,以前我是直接拼接成<UL><LI>发现这样拼完之后在更改树后对树的刷新不是很理想,现改用JSON格式,首先分析TREE中JOSN格式如 ...

  9. hdu 3948 The Number of Palindromes

    The Number of Palindromes Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 262144/262144 K (J ...

  10. Create MSSQL Procedure

    代码: CREATE PROCEDURE [dbo].[sp_UpdateCouponCount] AS GO