後來總算找到了SyntaxHighlighter，我個人認為，SyntaxHighlighter與wp-codebox還是有些落差，不過大致上已經足夠了，所以就來寫點筆記記下來囉！
官網上列出23種支援的程式語言，但是我下載了3.0.83版，裡面還多出了兩個shBrushAppleScript.js與shBrushSass.js，我不知道這是什麼語言，可能是作者忘記列上去了吧。
開始安裝
首先到官網的下載頁下載，或是直接載點。
假如沒有網路空間可以上傳script，官方也提供檔案網址可以直接使用 。例如shCore.js的網址就是：
http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js
最簡單的使用步驟就是：
一、在網頁的<head></head>之間加入以下程式碼：
<script type="text/javascript" src="scripts/shCore.js"></script> <!--下面這行是要改成你要使用的程式語言，例如這個就是使用JavaScript--> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <link href="styles/shCore.css" rel="stylesheet" type="text/css" /> <link href="styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
二、再來是放上程式碼的部份，有兩種方法：
1.把你的程式碼包在<pre class="brush: js"></pre>之間即可，就像這樣：
<pre class="brush: js">
<script type="text/javascript">
document.write("Hello World!!");
</script>
</pre>
2.這種我認為比較麻煩，所以有需要的話請參考官網網頁底下的說明。
注意要寫上要使用語法的class。
三、再把下面語法貼在</body>上方就完成了。
<script type="text/javascript"> SyntaxHighlighter.all() </script>
主題
SyntaxHighlighter共有8種主題，但官網上只列出7種。只要修改上述第一步驟第四、五行的相對應的檔案名稱即可：
 |
| Django |
 |
| Eclipse |
 |
| Emacs |
 |
| FadeToGrey |
 |
| MDUltra |
 |
| Midnight |
 |
| RDark |
在最新版3.0.83新增了一個shAutoloader.js，可以動態的載入語法的js檔。前述的方法，需要使用哪個語法就要加上一行<script type="text/javascript" src="scripts/shxxxxxx.js"></script>，頗費時費力的。
但是使用Autoloader只會在有用到時才載入，這樣不但方便許多，還可以增加網頁載入的速度。
使用的方式只要把原本
<script type="text/javascript" src="scripts/shxxxxxx.js"></script>全部只要替換成一行
<script src="scripts/shAutoloader.js" type="text/javascript"></script>並將上述第三步驟修改成
<script type="text/javascript"> SyntaxHighlighter.autoloader( 'js jscript javascript script/shBrushJScript.js', 'applescript script/shBrushAppleScript.js' ); SyntaxHighlighter.all(); </script>可以看出差別就在新增第2到第5行的程式碼而已。
前方的js jscript javascript就是class名稱，後方的scripts/shBrushJScript.js就是引用的js檔，只要寫上會用到的就行了。
另外在程式碼的地方連點滑鼠左鍵兩下，就能快速的選取全部的程式碼，方便複製。
SyntaxHighlighter設定只要在下面的程式碼加上想要的設定即可，詳細說明請看官網文件：
<script type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.strings.help= "?"; SyntaxHighlighter.config.stripBrs = false; SyntaxHighlighter.config.tagName ="pre"; SyntaxHighlighter.all() </script>SyntaxHighlighter預設顯示設定
設定的方法有兩種：
一、加在程式碼裡成為全域設定。
<script type="text/javascript">
SyntaxHighlighter.default.gutter = true;
SyntaxHighlighter.all();
</script>
二、在<pre>的class新增，成為獨立的設定。
<pre class="brush: js; gutter:true;firest-line:'10'; toolbar:false">
function {
alert("Hello World!");
}
</pre>
而可以設定的項目有以下10種，點擊名稱可看官網的DEMO：
auto-links ：是否要讓連結可以直接點擊。
class-name ：新增可以讓html或css取用的class。
collapse ：把程式碼收在一行，需要看時再點擊打開。
first-line ：程式碼起始的行數。
gutter ：程式碼行數顯示開關。
highlight ：設定哪一行需要特別強調。
html-script ：切換成顯示html語法，以免被解譯成正常的html語法。
smart-tabs ：開關smart-tabs功能。
tab-size ：tab鍵的大小。
toolbar ：開關toolbar。
沒有留言:
張貼留言