WordPress 非插件实现代码高亮 google-code-prettify

· 阅读约需6分钟
WordPress 代码高亮方法很多，可使用 CodeColorer、WP-Syntax、WP-Code 等优秀的 WordPress 插件，也可直接使用前端工具箱编码，把代码放入前端工具箱内编码，然后再拷到文章编辑器中，直接百度一下：前端工具箱。本文介绍的是 google-code-prettify，非插件实现代码高亮。其特点是小巧、易用，无须指定语言，即使非 WordPress 亦可实现代码高亮，更换主题或改用插件都不会有代码残留。 安装方法： 首先上官网下载最新的 google-code-prettify：https://code.google.com/p/google-code-prettify/ 安装方法一： 1. 从压缩包中提取 pretty.css 和 pretty.js 两个文件放置到主题根目录下； 2. 在 标签中引入 pretty.css 文件：
<link href="/prettify.css" type="text/css" rel="stylesheet" />
3. 在 标签前面加入以下代码：
<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js">
如果主题已经引入 jquery.js，上一行可以删除。
<script type="text/javascript" src="/prettify.js">

 jQuery(document).ready(function () {
 jQuery("pre").addClass("prettyprint linenums");
 prettyPrint();
 });
以上代码是给所有的
 标签添加 prettyprint linenums 类，linenums 表示显示行数 。然后 prettyPrint 来分析代码并上色。

 

安装方法二：

可直接在  中加入：


或者在压缩包中提取 run_prettify.js 放到主题根目录，然后在  中加入：
<script src="/run_prettify.js">
  使用方法： 写文章时用
你的代码
包围代码代码块，就可以看到上色的效果了，效果见本文。    附实现代码高亮的插件：
  1. CodeColorer
  2. WP-Syntax
  3. WP-Code
  4. Crayon Syntax Highlighter
  5. WP Code Highlight
 安装和使用都很方便，直接后台插件搜索名称，点击安装即可，使用方法见插件说明。    参考： https://code.google.com/p/google-code-prettify/wiki/GettingStarted