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

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

插件名稱：SyntaxHighlighter Evolved

插件作者：Viper007Bond, automattic

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

插件類型：代碼高亮

中文支持：支持

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

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

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

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

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

特效演示

　　只要做Web應(yīng)用的，無論是JSP，還是PHP,甚至ASP.NET，都會用JavaScript代碼。所以，就是用JavaScript代碼來演示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)的？我們接下來就介紹SyntaxHighlighter的使用方法。
安裝方法

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

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

??? [@java]這里寫你的代碼[/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"]這里寫你的代碼[/css]

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

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

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

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

顏色主題

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

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

語言別名

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

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

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

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

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

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

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

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

??? 在線操作方式是：登錄Wordpress后臺管理頁面，插件-編輯-選擇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;

        }


      
    

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

??? SyntaxHighlighter的“容器”樣式是一個(gè)方方正正。也許不如圓角、立體陰影效果漂亮。這個(gè)效果也很容易實(shí)現(xiàn)。只需要修改syntaxhighlighter的樣式即可；不過，這個(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終極使用詳解