wordpress中代码高亮显示的三种方式

2008年10月11日  |  01:14分类:其他  |  标签:  |  浏览: 957

由于alfie经常要写技术文档,经常需要在文章中插入代码块,于是比较了几种代码高亮的解决方案。

一、通过style.css格式化代码块

这种方式是最原始的,一般的主题的样式表中都会有都会有类似下面的语句:

code{
    font:1em 'Courier New',Courier,Fixed;
    display:block;
    overflow:auto;
    text-align:left;
    margin: 10px 0;
    padding: 5px 10px;
    background: #FBF5DF;
    border-top: solid 1px #EDE0B3;
    border-bottom: solid 1px #EDE0B3;
}

只需要在代码块前后加上<code> 和</code>就可以在文章中简单的格式化代码块了,不过这种方式比较简陋,仅能实现代码的字体和大小,无法实现关键字高亮、缩进等。效果见上

二、在文章中直接插入已格式化好的代码

网友Unmi(隔叶黄莺)在dp.SyntaxHighlighter的基础上写了一个代码高亮的工具:CodeRender,它有自己的样式表,并提供格式化功能,可以依据各种不同语言的关键字进行高亮显示,用户只需要将格式化好后的<div>块插入文章中即可。下面是CodeRender工具的截图:

coderender.sample  下面则是使用CodeRender的效果:

coderender.sample 

三、使用wp-syntax插件

wp-syntax是一个专门用于代码高亮的wp插件,它是基于geshi这个php开源程序进行二次开发的,支持的语言种类异常丰富,用户只需要在写文章的时候,在代码块前后加上:<pre lang=”Lanuage”>和</pre>,后台就会自动帮你格式化代码了,下面是效果图:

wp_syntax.sample

对比三种方式,第一种最简单,但是功能最弱,无法满足要求;第二种灵活性最强,即使更换了blog系统,文章内的代码块效果依然保持不变,但是用户使用麻烦,需要频繁的在CodeRender和blog编辑器间切换;第三种使用比较方便,而且效果最佳,唯一的劣势仅限于wordpress平台,万一哪天换了平台,原有文章的代码块效果就消失了。不过一旦用上了wordpress,更换其它blog系统的可能性就很小了,因为它是如此的漂亮和优雅。

因而,建议采用wp-syntax插件这种方式,类似的插件还有国人编写的coolcode,有兴趣的读者也可以试一下。

喜欢本文,那就收藏到: Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

1条评论 关于 “wordpress中代码高亮显示的三种方式”

  1. knife 发表于: 七月 16th, 2010 11:52

    最后用的“喜欢本文,那就收藏到”是什么插件?

    回复回复

发表您的评论