通過syntaxhighlight實現(xiàn)帝國cms代碼高亮/語法高亮(一)

發(fā)布時間：2013-08-02 10:18:00 作者：佚名

默認的將帝國CMS的編輯器沒有插入代碼選項，內(nèi)容頁展示代碼時也沒有代碼高亮，這給我們帶來了很多不便。下邊就介紹將syntaxhighlight與帝國CMS的編輯器整合，實現(xiàn)發(fā)表文章內(nèi)容中代碼高亮

一、在帝國cms中使用該插件：

1.下載syntaxhighlight插件，地址為：
http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current
2.解壓syntaxhighlighter_3.0.83.zip文件;
3.syntaxhighlighter_3.0.83文件夾中的styles、scripts、src文件夾復(fù)制到ecms中相應(yīng)的文件夾中。
將sytles中的css文件存放在"skin/default/css/syntaxhighlighter/"文件夾中。注意復(fù)制的是css文件。
將scripts、src文件夾存放在"skin/default/js/syntaxhighlighter/"文件夾中。注意復(fù)制的是scripts和src文件夾。
4.在需要代碼高亮的內(nèi)容頁添加如下內(nèi)容：

復(fù)制代碼

代碼如下:

由于上面的js過多，網(wǎng)上有人講js整合為一個文件，方便調(diào)用。

如圖所示：

5.點擊編輯器的“源代碼”按鈕，在源代碼視圖粘貼如下代碼，如圖所示。

復(fù)制代碼

代碼如下:

<pre class="brush: java; smart-tabs: true" title="www.ishang123.com">
class Foo {
T value;
}
Gson gson = new Gson();
Foo foo = new Foo();
gson.toJson(foo); // May not serialize foo.value correctly
gson.fromJson(json, foo.getClass());
</pre>

6.刷新內(nèi)容頁，網(wǎng)頁效果如圖所示：

7.至此，我們完成了在編輯器里寫syntaxhighlight源代碼方式實現(xiàn)代碼的高亮。下一節(jié)將介紹如何在編輯器頁面添加syntaxhighlight的快捷方式。

8。關(guān)于syntaxhighlight更詳細的用法參見：

http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/