通過(guò)syntaxhighlight實(shí)現(xiàn)帝國(guó)cms代碼高亮/語(yǔ)法高亮(一)

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

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

一、在帝國(guó)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)容頁(yè)添加如下內(nèi)容：

復(fù)制代碼

代碼如下:

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

如圖所示：

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

復(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)容頁(yè)，網(wǎng)頁(yè)效果如圖所示：

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

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

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