code-prettify — wordpress语法高亮插件

最近基于google-code-prettify实现了一个代码高亮的wordpress插件 — code-pretttify,测试了下效果还不错,所以我马上把全站的代码高亮插件换成了这个。

这里是code-prettify的项目主页,我会把这个plugin的最新情况更新在这里。

code-prettify的特点

  • 完全由javascript完成代码高亮,不占用服务器资源
  • 使用简单,只要用<pre><code>和</code></pre>包住代码,发布即可,这是wordpress编辑器自带的quicktag。
  • 没有添加额外的hook,所以不会和别的wordpress插件产生冲突,绿色无污染
  • 载入速度很快,因为js是在页面尾部加载的,不会堵塞页面的载入!

代码高亮效果演示

eg:


<pre><code>
class BigBang {
    function blah() {
        echo "Hello ooso.net";
    }
}
</code></pre>

Effect:


class BigBang {
    function blah() {
        echo "Hello ooso.net";
    }
}

测试objective-c的code prettify效果

TTImageView *thumb = [[[TTImageView alloc] initWithFrame:CGRectMake(30, 30, 0, 0)] autorelease];
[thumb setAutoresizesToImage:YES];
[thumb setURL:@"http://farm4.static.flickr.com/3163/3110335722_7a906f9d8b_m.jpg"];
[self.view addSubview:thumb];

code-prettify下载

暂时把代码托管到github.com/volca/code-prettify,所以你可以直接使用git下载代码,或者直接从github下载现成的zip包。

代码非常简单,如果你有合适修正,可以试着用github推给我。

Update

另外安装了一个全新的wordpress测试,发现一些bug,因为wordpress默认对文本进行格式修正,在代码后面添加了很多br以及p标签,导致插件失效,所以我不得已用php替换了一些内容保证插件的正常运行。

12 replies on “code-prettify — wordpress语法高亮插件”

  1. @anakin 在写这个插件之前,我已经试用过你提到的这个插件。首先这个插件已经很长时间没更新了,用到的google-code-prettify还是比较老的版本;其次这个插件需要用这样的形式来张贴代码:
    <pre class="prettyprint">
    blahblahblah...
    </pre>

    在我看来显得麻烦。最后一个也是最重要的原因,他的代码里使用了preg_replace_callback进行代码的转义,完全没有必要,用javascript已经可以搞定。

  2. 这个模板像宽屏版的spring,但是我是从coolcode下载来的模板。另外我觉得wordpress模板一定保留版权特矫情

  3. 最大的缺点就是用了 这种形式的标签. 你如果在wordpress中直接编辑html的模式输入,然后你再转到 可视化模式, 这个非正规标签就会被滤掉..... 如果你再可视化方式输入< ,那么<就会被转移 &lt , 所以就郁闷了!

    最好还是 [code]

Comments are closed.