Ethan's Blog

不负好时光

非插件实现 WordPress 代码高亮

对于需要经常在文章中插入代码的作者来说,不管是出于美观的需求还是便于识读,代码高亮显示都是必须的。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 代码高亮插件,到时候再聊。如果你有更好的推荐,欢迎你留言告诉我。

相关文章: