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代码高亮插件,到时候再聊。如果你有更好的推荐,欢迎你留言告诉我。

相关推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注