考虑到这是一个半技术性的博客,代码不可少,那么代码高亮就更必不可少了。好在wordpress是个强大的博客系统,很多问题都可以通过插件方便的解决。而之前看到关于代码高亮的一款JavaScript 库SyntaxHighlighter,搜了一下,果然有相关的wordpress插件,叫做SyntaxHighlighter Evolved。
插件安装过程就不再赘述了,去搜索SyntaxHighlighter Evolved安装即可,支持最新版的wordpress。
怎么使用呢?来个例子。比如我要显示一段html的代码,那么我们可以直接编辑代码:
我们看一下具体的效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>PHP Code Example</title> </head> <body> <h1>PHP Code Example</h1> <p><?php echo 'Hello World!'; ?></p> <p>This line is highlighted.</p> <div class="foobar"> This is an example of smart tabs. </div> <p><a href="http://wordpress.org/">WordPress</a></p> </body> </html>
效果似乎还不错,在手机上测试了一下,同样可以正常显示。需要提到的一点是,多行代码高亮显示,只需要在行号之间用英文逗号隔开即可,像上面的例子,我就是加了highlight=”3,5″这一个参数。
同时,插件还支持各种风格的代码显示,几乎所有主流编程语言都能显示,详细设置的话直接在“wordpress后台–设置–SyntaxHighlighter”中进行更改即可。更高级的功能,一般都很少用上,这里就不多说了。有时间的朋友,还可以自定义css,把代码的显示弄的有个人特色一点。
另,找到一篇很详细介绍这个插件使用的文章,供大家参考:http://www.diguage.com/archives/59.html
不错