子曰： 工欲善其事，必先利其器。作為碼農(nóng)一枚，再加上站長(zhǎng)這個(gè)已經(jīng)不再光鮮的稱(chēng)呼，豈能沒(méi)有一款經(jīng)濟(jì)實(shí)用、操作簡(jiǎn)單、而且功能必須強(qiáng)大、樣式也必須好看的Wordpress代碼高亮插件？！作為一個(gè)視代碼如生命的碼農(nóng)，把代碼整的漂漂亮亮是一件多么神圣和偉大的事情啊！

　　今天就給大家推薦一款這樣的代碼高亮插件：SyntaxHighlighter Evolved。相信我， 功這款插件能強(qiáng)足夠大、并且簡(jiǎn)單易用，絕對(duì)值得推薦。本站就是用的這款插件，大家可以看看“生病的JavaScript代碼”，這就是最好的例子。
插件介紹

插件名稱(chēng)：SyntaxHighlighter Evolved

插件作者：Viper007Bond, automattic

作者主頁(yè)：http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

插件類(lèi)型：代碼高亮

中文支持：支持

安裝環(huán)境：WordPress2.7或以上版本，經(jīng)過(guò)我自己的測(cè)試，在3.3和3.4上都可以正常運(yùn)行

下載地址：點(diǎn)擊這里下載最新版

　　SyntaxHighlighter Evolved基于開(kāi)源的JS核心庫(kù)：SyntaxHighlighter JavaScript package by Alex Gorbatchev二次開(kāi)發(fā)擴(kuò)展的。安裝后只需簡(jiǎn)單設(shè)置一下，不用修改任何代碼即可達(dá)到很好的效果。
功能特效

　　說(shuō)起SyntaxHighlighter Evolved的特效，忍不住要“炫耀”一下。不說(shuō)不足以讓你感受到SyntaxHighlighter Evolved的強(qiáng)悍功能。SyntaxHighlighter Evolved的功能特效如下：

??? 代碼高亮
??? 支持Eclips、Emacs等多種樣式，可搭配不同風(fēng)格的主題
??? 特色——顯示工具條。右上角顯示工具條，可以”查看源代碼”、”復(fù)制源代碼”、”打印源代碼”。（只有第2版支持）
??? 顯示行號(hào)
??? 長(zhǎng)代碼自動(dòng)換行（只有第2版支持）
??? 可以點(diǎn)擊代碼中的超文本鏈接
??? 可以收縮代碼框
??? 高亮顯示模式—某一行高亮
??? 設(shè)置開(kāi)始行號(hào)
??? 自定義樣式

特效演示

　　只要做Web應(yīng)用的，無(wú)論是JSP，還是PHP,甚至ASP.NET，都會(huì)用JavaScript代碼。所以，就是用JavaScript代碼來(lái)演示SyntaxHighlighter的功能吧。要實(shí)現(xiàn)的功能是計(jì)算第N個(gè)斐波納契數(shù)列（Fibonacci Sequence）數(shù)列的值。同時(shí)，我們要求文件名顯示為：FibonacciSequence.js；代碼的第二行高亮顯示。則實(shí)例如下：

          function fib(n) {

        return n<2 ? n : fib(n-1) + fib(n-2);

    }    function fib(n) {

        return n<2 ? n : fib(n-1) + fib(n-2);

    }


    

?
　　怎么樣，你是不是已經(jīng)被SyntaxHighlighter強(qiáng)大功能震撼了？也許你已經(jīng)好奇，這是如何實(shí)現(xiàn)的？我們接下來(lái)就介紹SyntaxHighlighter的使用方法。
安裝方法

　　只需要在后臺(tái)插件里搜索“SyntaxHighlighter Evolved”之后點(diǎn)擊安裝，啟用即可。
使用方法

　　使用方法很簡(jiǎn)單。在發(fā)布文章時(shí)，在“HTML”編輯模式下（注意：不是CKEditor等富文本編輯模式；防止讓這些富文本編輯器把代碼轉(zhuǎn)義了。），使用如下代碼，把需要展示的代碼包含起來(lái)即可：（注意：把前面的@符號(hào)去掉。）

??? [@java]這里寫(xiě)你的代碼[/java]

??? [@css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="example-filename.php"]這里寫(xiě)你的代碼[/css]

??? [@code lang="js"]這里寫(xiě)你的代碼[/code]

??? [@sourcecode language="plain"]這里寫(xiě)你的代碼[/sourcecode]

??? 推薦使用這種方式。這種使用方式，見(jiàn)"最佳實(shí)踐"

　　其實(shí)，在網(wǎng)上，搜“SyntaxHighlighter 使用方法”就會(huì)出現(xiàn)一堆結(jié)果，里面大多時(shí)對(duì)于這些使用方法的羅列。很少去講解這些配置項(xiàng)的意思和說(shuō)明。下面，我將針對(duì)這些配置進(jìn)行詳細(xì)說(shuō)明。同時(shí)，針對(duì)這些配置的使用，我總結(jié)了SyntaxHighlighter使用方法的最佳實(shí)踐。如果急于知道結(jié)果，可以直接查看“最佳實(shí)踐”。
配置詳解
代碼樣式配置
表-1-SyntaxHighlighter配置參數(shù)表

顏色主題

　　目前IT行業(yè)中，常用的語(yǔ)言有幾十種；使用的開(kāi)發(fā)環(huán)境也多種多樣，比如開(kāi)發(fā)Java的也許用Eclipse的比較多；但是在Linux下做C/C++開(kāi)發(fā)的也許用Emacs等。見(jiàn)過(guò)這些開(kāi)發(fā)環(huán)境的人都知道，這些開(kāi)發(fā)環(huán)境的高亮模式、顏色等都是不一樣的。習(xí)慣了Eclipse的人很難適應(yīng)Emacs；反之亦然。SyntaxHighlighter考慮的很周全，她在內(nèi)部直接繼承了大概其中這樣的顏色主題來(lái)供大家選擇。大家可以在后臺(tái)的管理頁(yè)面輕松的選擇自己喜歡的“顏色主題”來(lái)進(jìn)行顯示。“顏色主題”列表如下：（排名部分前后。呵呵）

??? Default
??? Django
??? Eclipse
??? Emacs
??? Fade to Grey
??? Midnight
??? RDark
??? None

語(yǔ)言別名

　　從事IT行業(yè)的朋友也許都知道，由于歷史等原因，一個(gè)語(yǔ)言可能有好幾個(gè)名字。比如JavaScript，微軟山寨了個(gè)JScript；后來(lái)經(jīng)過(guò)ECMA標(biāo)準(zhǔn)化之后，名字又稱(chēng)了ECMAScript；我們大家平時(shí)還簡(jiǎn)稱(chēng)成JS。這就給我們?cè)谑褂肧yntaxHighlighter的語(yǔ)言代號(hào)時(shí)，造成了一定的困難：不知道到底該用哪個(gè)名字才是“正確”的。

　　其實(shí)，這點(diǎn)SyntaxHighlighter也考慮到了。她通過(guò)“語(yǔ)言別名”的方式很好的解決了這個(gè)問(wèn)題。
表-2-SyntaxHighlighter中“語(yǔ)言別名”和“語(yǔ)言代碼”對(duì)應(yīng)表

　　從這個(gè)表中，我們也可以看出SyntaxHighlighter支持的編程語(yǔ)言多達(dá)二十五種語(yǔ)言：AppleScript、 ActionScript、 Bash、 ColdFusion、 C /C++、 C#、 CSS、 Delphi、 Diff（不知道這是不是一種編程語(yǔ)言）、 Erlang、 Groovy、 Java、 JavaFX、 JavaScript、 Perl、 PHP、 PowerShell、 Python、 Ruby、 Sass、 Scala、 SQL、 VB、 XML。
最佳實(shí)踐

　　經(jīng)過(guò)配置的講解，我們可以明白，SyntaxHighlighter已經(jīng)遵循了軟件工程中的最佳實(shí)踐“約定大于配置”。其實(shí)，我們并不需要過(guò)多地去設(shè)定SyntaxHighlighter的配置，只需要設(shè)定一些“實(shí)在沒(méi)辦法約定”的配置項(xiàng)即可。比如：title、highlight等。另外，經(jīng)過(guò)我自己的實(shí)際測(cè)試，我還發(fā)現(xiàn)了第五種使用方法，其實(shí)，我們可以在[代碼名稱(chēng)]這個(gè)標(biāo)簽中，添加剛剛講到的配置配置項(xiàng)。當(dāng)然，lang就沒(méi)必要了。因?yàn)檫@里已經(jīng)通過(guò)“標(biāo)簽名”指定過(guò)了。綜上所述，SyntaxHighlighter使用方法的最佳實(shí)踐如下：（下面以Java代碼為例）

　　[@java title="自定義的文件名" highlight="高亮的行"]　這里寫(xiě)你的代碼　[/java]

　　有時(shí)，我們并不需要一定有高亮強(qiáng)調(diào)的行，這是highlight就可以省略掉。另外，如果你需要自定義樣式，可以添加class屬性。不過(guò)，我個(gè)人覺(jué)得必要性不大。
特效擴(kuò)展

??? 設(shè)置背景樣式

??? 大家在 "生病的JavaScript代碼" 也許會(huì)發(fā)現(xiàn)高亮部分的背景顏色比較深，也許有一些人看著不舒服（我個(gè)人就覺(jué)得顏色有點(diǎn)深）。也許就有人想修改高亮行的背景色。這是，就可以通過(guò)修改插件自帶的CSS文件，來(lái)實(shí)現(xiàn)自定義樣式的功能。

??? 在線操作方式是：登錄Wordpress后臺(tái)管理頁(yè)面，插件-編輯-選擇SyntaxHighlighter-選擇syntaxhighlighter/syntaxhighlighter2/styles/shThemeDefault.css-找到

      
                .syntaxhighlighter .line.highlighted.alt1,

        .syntaxhighlighter .line.highlighted.alt2

        {

            background-color: #e0e0e0 !important;

        }



    將其修改為：

        .syntaxhighlighter .line.highlighted.alt1,

        .syntaxhighlighter .line.highlighted.alt2

        {

            background-color: #6CE26C !important;

        }


      
    

??? 重起見(jiàn)，D瓜哥不建議做這個(gè)修改。如果以后修改“顏色主題”可能會(huì)帶來(lái)一點(diǎn)的不良影響。
??? 實(shí)現(xiàn)圓角和陰影

??? SyntaxHighlighter的“容器”樣式是一個(gè)方方正正。也許不如圓角、立體陰影效果漂亮。這個(gè)效果也很容易實(shí)現(xiàn)。只需要修改syntaxhighlighter的樣式即可；不過(guò)，這個(gè)修改是在主題的style.css文件做的。修改方式如下：將以下代碼添加到主題的style.css文件里面：

      
                .syntaxhighlighter{

             padding: 10px 0 !important;

             box-shadow: 1px 1px 3px #ccc;

            -webkit-box-shadow: 1px 1px 3px #ccc;

            -moz-box-shadow: 1px 1px 3px #ccc;

            border-radius: 5px;

           -webkit-border-radius: 5px;

            -moz-border-radius: 5px;

         }


      
    

WordPress代碼高亮插件SyntaxHighlighter終極使用詳解