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

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

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

引入方法：

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

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

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

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

官方给的启用方法是：

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

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

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

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

代码高亮使用方法：

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

prettyprint 是渲染类

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

  1. <pre class="prettyprint lang-html">
  2.   The lang-* class specifies the language file extensions.
  3.   File extensions supported by default include:
  4.     "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
  5.     "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
  6.     "xsl".
  7. </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. 基于DCT系数的实时监控中运动目标检测

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

  2. Ruby环境搭建

    刚接触Ruby,发现Ruby真心强大,搞了那么久的Java了,已经被Java的繁琐的语法整的无语透顶了,尤其的Java异常,设计出来就是个失败呀!Ruby目前更新到了2.x了,社区也很活跃,开发效率和 ...

  3. python练习：抓取统计log内ip数量

    #!/usr/bin/python #-*- coding: utf- -*- import os import re rawfile = '/var/log/auth.log' def rawpar ...

  4. sgu 131 状压DP

    棋盘覆盖(二) 时间限制:1000 ms  |  内存限制:65535 KB     描述 The banquet hall of Computer Scientists' Palace has a ...

  5. <audio>标签HTML5音乐播放器

    <audio>标签:用于在文档中表示音频内容.利用它,你可以在你的个人网站上放一首你喜欢的歌.    <audio src="music.mp3">< ...

  6. C# 中的委托和事件(详解)

    C# 中的委托和事件 委托和事件在 .NET Framework 中的应用非常广泛,然而,较好地理解委托和事件对很多接触 C# 时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太 ...

  7. c# 事实证明，abstract类除了不能用new实例化和类没什么区别

    abstract类是抽象类,不能够实例化,大家都知道,abstract类往往和接口interface一块儿使用,针对接口中一些公共的方法进行实现,然后实体类去继承抽象类和接口.虽然abstract类不 ...

  8. IntelliJ IDEA使用技巧 (类比pycharm)

    第1章 课程介绍 1)下载及安装2)界面介绍  ... ①界面中左右最边上的小窗口(旋转了90度的字体)都自带了下标,win下快捷键alt+index切换窗口 ②演示效果:模拟时钟,快捷键如,0到10 ...

  9. 例子Architecting Android…The clean way?----代码分析

    Presention层:   整个应用启动的时候,就执行依赖的初始化.编译项目之后,Dagger依赖框架使用ApplicationComponent生成一个DaggerApplicationCOmpo ...

  10. 【bzoj3648】环套树+点分治+树状数组

    tree 1s 128M  by hzw czy神犇种了一棵树,他想知道地球的质量 给定一棵n个点的树,求树上经过点的个数≥K的路径数量ans 对于部分数据,树上某两点间会多出最多一条无向边 输入数据 ...