SyntaxHighlighter代碼高亮外掛程式，syntaxhighlighter

SyntaxHighlighter代碼高亮外掛程式，syntaxhighlighter
SyntaxHighlighter是Google Code上的一個開源項目,主要用於給網頁上的代碼著色,

使用十分方便,效果也不錯,而且幾乎支援常見的所有語言。

使用步驟：

一、下載並解壓縮SyntaxHighlighter(http://download.csdn.net/detail/itmyhome/7757359)目前的版本3.0.83

二、引入檔案

將解壓後的scripts和styles檔案夾複製到項目中,在頁面中引入shCore.js和核心CSS檔案shCore.css

其次引入你要高亮的語言JS,比如想高亮顯示Java,那麼必須引入scripts檔案夾中的shBrushJava.js

最後引入高亮顯示的主題CSS,預設為shThemeDefault.css

三、下面以高亮顯示html代碼為例

引入JS和CSS檔案後 寫如下代碼：

JavaScript代碼：

<script type="text/javascript">SyntaxHighlighter.defaults['toolbar'] = false;  //去掉右上方問號表徵圖SyntaxHighlighter.config.tagName = 'pre';       //可以更改解析的預設Tag。SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.stripBrs = true;  SyntaxHighlighter.all();</script>

HTML代碼：

<pre class="brush: html;">    <table>    <tbody><tr>    <td>hello</td>    <td>syntaxhighlighter</td></tr><tr>    <td>代碼</td>    <td>亮起來</td></tr>    </tbody>    </table></pre>

註：HTML代碼顯示在標籤為<pre></pre>中,SyntaxHighlighter預設會自動尋找</pre>標籤

其中標籤可自訂,可以是<div>、<p>等等,只需修改如下配置代碼：

SyntaxHighlighter.config.tagName = 'div'; 

同時根椐class類名選擇不同的格式刷,如上是以html為例,因此格式刷配置為 class="brush: html;"

效果

如果右側出現捲軸

解決方案為：

找到shCore.css這個檔案,找到

.syntaxhighlighter table {   width: 100% !important;}

修改為：

.syntaxhighlighter table {   width: 100% !important;   margin: 1px 0 !important;}

項目示範源碼下載：http://download.csdn.net/detail/itmyhome/7757359

轉載請註明出處：http://blog.csdn.net/itmyhome1990/article/details/38517737

wordpress主題不支援SyntaxHighlighter Evolved

有些主題設計的就是不支援某些外掛程式，還是使用原來的主題吧
 
怎給網頁中的代碼加樣式，就是像圖片中的那樣

這個是代碼高亮顯示外掛程式
用的比較多的是SyntaxHighlighter
：
www.jb51.net/jiaoben/15599.html
使用教程：
www.jb51.net/article/18681.htm

其它的也有你可以自行參考