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

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

插件名稱：SyntaxHighlighter Evolved

插件作者：Viper007Bond, automattic

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

插件類型：代碼高亮

中文支持：支持

安裝環境：WordPress2.7或以上版本，經過我自己的測試，在3.3和3.4上都可以正常運行

下載地址：點擊這里下載最新版

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

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

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

特效演示

　　只要做Web應用的，無論是JSP，還是PHP,甚至ASP.NET，都會用JavaScript代碼。所以，就是用JavaScript代碼來演示SyntaxHighlighter的功能吧。要實現的功能是計算第N個斐波納契數列（Fibonacci Sequence）數列的值。同時，我們要求文件名顯示為：FibonacciSequence.js；代碼的第二行高亮顯示。則實例如下：

          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);

    }


    

?
　　怎么樣，你是不是已經被SyntaxHighlighter強大功能震撼了？也許你已經好奇，這是如何實現的？我們接下來就介紹SyntaxHighlighter的使用方法。
安裝方法

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

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

??? [@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]

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

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

顏色主題

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

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

語言別名

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

　　其實，這點SyntaxHighlighter也考慮到了。她通過“語言別名”的方式很好的解決了這個問題。
表-2-SyntaxHighlighter中“語言別名”和“語言代碼”對應表

　　從這個表中，我們也可以看出SyntaxHighlighter支持的編程語言多達二十五種語言：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。
最佳實踐

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

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

　　有時，我們并不需要一定有高亮強調的行，這是highlight就可以省略掉。另外，如果你需要自定義樣式，可以添加class屬性。不過，我個人覺得必要性不大。
特效擴展

??? 設置背景樣式

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

??? 在線操作方式是：登錄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瓜哥不建議做這個修改。如果以后修改“顏色主題”可能會帶來一點的不良影響。
??? 實現圓角和陰影

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