在撰寫網誌時,若是有使用到程式碼,可能多半會遇到將程式碼貼到網誌時,版面是一團混亂,而 SyntaxHighlighter 這個免費的 Java Script 工具。這個是在客戶端的瀏覽器上執行,所以只要瀏覽器有支援,應該都可以正確顯示:
Step1. 先去 SyntaxHighlighter 下載檔案
Step2. 再將裡面相關的javascript檔案和css上傳到自己的網頁空間
(只要 Scripts 資料夾內的程式(*.js 與 *.swf) 及 Styles 資料夾內的 SyntaxHighlighter.css上傳即可)
Step3. 登入您的 Blogger
Step4. 點選[版面配置]\[範本]\[修改 HTML]
Step5. 將以下的範例,複製到</body></html>標籤的前面
<link href="http://你的網頁空間網址/SyntaxHighlighter.css" rel="stylesheet" type="text/css">
<script class="javascript" src="http://你的網頁空間網址/shCore.js"></script>
<script class="javascript" src="http://你的網頁空間網/shBrushCSharp.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushPhp.js"></script>
<script class="javascript" src="http://你的網頁空間網/shBrushJScript.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushJava.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushVb.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushSql.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushXml.js"></script>
<script class="javascript" src="http://你的網頁空間網/shBrushDelphi.js"></script>
<script class="javascript" src="http://你的網頁空間網/shBrushPython.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushRuby.js"></script> <script class="javascript" src="http://你的網頁空間網址/shBrushCss.js"></script>
<script class="javascript" src="http://你的網頁空間網址/shBrushCpp.js"></script>
<script class="javascript">
//<![CDATA[
dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
//]]>
</script>
Step6. 測試是否 SyntaxHighlighter 與 BloggerMode 有正常運作
使用時加上如下的 Code:
<textarea name='code' class='language'>
程式碼
</textarea>
or
<pre name='code' class='language'>
程式碼
</pre>
其中 languages 部分,目前所支援有:
C++、C#、CSS、Delphi、Java、Java Script、PHP、Python、Ruby、Sql、VB、XML/HTML 等等。
請參考以下列表,將指定的語言之 Aliases 置換到 languages 的位置上。
Language Aliases
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt
ps.建議若在<pre>...</pre>區塊中有"<"和">"時要將"<"轉成"& l t ;",">"轉成"& g t ;",這樣才不會錯(把空格去掉)
資料來源:
http://sharedderrick.blogspot.com/2007/12/blogger-syntaxhighlighter.html
http://yehhou.blogspot.com/2007/06/blogger-dpsyntaxhighlighter.html
沒有留言:
張貼留言