使用wordpress代码高亮插件

考虑到这是一个半技术性的博客,代码不可少,那么代码高亮就更必不可少了。好在wordpress是个强大的博客系统,很多问题都可以通过插件方便的解决。而之前看到关于代码高亮的一款JavaScript 库SyntaxHighlighter,搜了一下,果然有相关的wordpress插件,叫做SyntaxHighlighter Evolved。

插件安装过程就不再赘述了,去搜索SyntaxHighlighter Evolved安装即可,支持最新版的wordpress。

怎么使用呢?来个例子。比如我要显示一段html的代码,那么我们可以直接编辑代码:

SyntaxHighlighter代码用法

我们看一下具体的效果:

<!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

《使用wordpress代码高亮插件》有1个想法

发表评论

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