Ethan's Blog

记录和思考

非插件实现 WordPress 代码高亮

发表于: 分类: Tech 热度:

对于需要经常在文章中插入代码的作者来说，不管是出于美观的需求还是便于识读，代码高亮显示都是必须的。WordPress 代码高亮的方法很多，主要分为两大类，一是使用插件，二是自己通过代码调用一些 jquery 插件实现。对于喜欢折腾代码的博主来说，代码实现高亮功能是必须的。

也说说插件

WordPress 代码高亮的插件相当多，用户可以自己选择。我推荐一款，同样也是 WordPress 官方推荐的代码高亮插件：SyntaxHighlighter Evolved。他的作者是 Viper007Bond，不管他的名字为什么这么奇怪，但是这个插件真的是谁用谁知道。

代码实现

代码实现代码高亮的功能其实还是需要引入其他的 js 和 css 文件，只不过是通过代码的方式来做罢了。我反复比较了很多的 jquery 代码高亮插件，最终选择了 google-code-prettify。原因在于我发现这个插件比较小巧，然后使用也方便，显示效果还不错。

DEMO

<script type="text/javascript">
    // Say hello world until the user starts questioning
    // the meaningfulness of their existence.
    function helloWorld(world) {
        for (var i = 42; --i >= 0;) {
            alert('Hello ' + String(world));
    }}
</script>
<style>
    p { color: pink }
    b { color: blue }
    u { color: "umber" }
</style>

实现方法

引入相关的 js 和 css 有两种方法：

方法一：把代码下载到自己的服务器上，然后进行引入。步骤为：

  1. 从 https://code.google.com/p/google-code-prettify/downloads/list 下载相应的源代码，解压后将相关文件上传到自己的服务器。
  2. 需要代码高亮页面的头部引入 css 文件：<link href=”服务器上存放源文件的路径/prettify.css” type=”text/css” rel=”stylesheet” />，对于 WordPress 则是在 head.php 中添加。
  3. 需要代码高亮的页面底部引入 js 文件：<script type=”text/javascript” src=”服务器上存放源文件的路径/prettify.js”></script>
  4. 在 body 标签中添加 onload，之后形式如：<body onload=”prettyPrint()”>。

方法二：通过谷歌代码在线调用。只需一步：

在需要代码高亮功能的页面底部加入 <script src=”https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js”></script> 即可。

添加了调用和引用之后，撰写文章时，在加入代码的时候用 class=”prettyprint” 的 <pre>、 <code> 或者 <xmp> 标签包围代码，这些代码就能被自动美化了。使用方法：

<pre class=”prettyprint”>

    source code here

</pre>

NOTES

关于主题

可以在 http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html 选择合适的主题，加以引用即可。如果是自己服务器加载源文件方法，则点击对应主题后，看到 css 源代码将之覆盖到服务器源文件 prettify.css 中即可。对于在线调用谷歌代码方式，可以在链接中添加参数 skin = 主题名进行调用，形如 <script src=”https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>;

我会在近期自己写一个比较好看通用一点的主题，敬请关注。

关于语言识别

google-code-prettify 不需要用户去标记语言是什么，完全可以自动识别 C 类语言和 html 标记类语言，关于支持的语言类型可以查询此处：https://code.google.com/p/google-code-prettify/source/browse/trunk/src 。但是如果识别不了，也可以通过辅助识别的方式来帮助 google-code-prettify 进行代码识别，例如使用 lang-scm 来辅助识别 Scheme code。

<pre class=”prettyprint lang-scm”>(friends ‘of ‘(parentheses))</pre>

关于行号

使用下面的方法来显示代码行号：

<pre class=”prettyprint linenums”>

Many

lines

of

code

</pre>

关于代码实现 WordPress 代码高亮就写到这里，也许以后还会发现更好的 jquery 代码高亮插件，到时候再聊。如果你有更好的推荐，欢迎你留言告诉我。

相关文章：