如何在WORDPRESS中使用Syntax Highlighter进行代码高亮

  今天决定在自己博客里加上代码高亮。毕竟是技术类博客嘛,要展示代码的地方很多。比较了几款代码高亮插件后,决定使用Syntax Highlighter,也就是Google Syntax Highlighter for WordPress。 一款帮助开发者/coder 发表代码片段更加简单和漂亮的插件,完全基于Javascript。下面是我安装Syntax Highlighter的步骤,可能不是最好的,但是的确可用的。

1.到GoogleCode下载Syntax Highlighter。

2.解压后上传到服务器wp-content/下,这就已经可以使用了。

  在Wordpress写文章时,在“HTML编辑”状态下写,将代码用<pre name=”code” class=”php”></pre>包起,当然要把php换成源码的语言名,下面是Syntax Highlighter支持的语言和对应该处语言名可以使用的的写法:

Language Aliases
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

举例:
<pre name=”code” class=”php”>
<?
//插入PHP源码
$a=5;
$a++;
echo $a;
?>
</pre>

  最后,在文章的末尾插入
<link type=”text/css” rel=”stylesheet” href=”../../wp-content/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css”></link>
<script language=”javascript” src=”../../wp-content/dp.SyntaxHighlighter/Scripts/shCore.js”></script>
<script language=”javascript” src=”../../wp-content/dp.SyntaxHighlighter/Scripts/shBrushPhp.js“></script>
<script language=”javascript”>
dp.SyntaxHighlighter.ClipboardSwf =’../../wp-content/dp.SyntaxHighlighter/Scripts/clipboard.swf’;
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>

  红色部分要换成相应语言对应的文件名,具体是什么文件名,请查看dp.SyntaxHighlighter/Scripts/文件夹下的文件。

 

  本文只介绍了SyntaxHighlighter的最简单应用,它的强大功能远不止这些,要了解的请到GoogleCode的Syntax Highlighter Wiki.

5 评论

发表评论

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