網頁

在 Blogger 中使用 SyntaxHighlighter 讓程式碼更容易閱讀

[ 前言 ]
當我們在撰寫網誌時,有時候需要貼程式碼,可是貼到網誌上的程式碼並不會乖乖的聽話,使得版面亂七八遭不容易閱讀,看起來也不美觀,該怎麼辦呢? 這時候有個好幫手,就叫做 SyntaxHighlighter。

那 SyntaxHighlighter 是什麼呢? SyntaxHighlighter 是一個能讓你張貼的程式碼美化,不僅看起來美觀整齊,也方便閱讀,是一個非常不錯的小工具。

[ SyntaxHighlighter 展示 ]
圖1


[ SyntaxHighlighter 特色 ]
  • 完全用於客戶端,不佔伺服端流量。
  • 支援多種語言。
  • 支援多個瀏覽器。
  • 可檢視純文字檔。
  • 全文複製。
  • 直接列印。
  • 非常輕巧簡單。
[ SyntaxHighlighter 語言支援 ]
Brush nameBrush aliasesFile name
Bash/shellbash,shellshBrushBash.js
C#c-sharp,csharpshBrushCSharp.js
C++cpp,cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi,pas,pascalshBrushDelphi.js
Diffdiff,patchshBrushDiff.js
GroovygroovyshBrushGroovy.js
JavaScriptjs,jscript,javascriptshBrushJScript.js
JavajavashBrushJava.js
Perlperl,plshBrushPerl.js
PHPphpshBrushPhp.js
PlainTextplain,textshBrushPlain.js
Pythonpy,pythonshBrushPython.js
Rubyrails,ror,rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
VisualBasicvb,vbnetshBrushVb.js
XMLxml,xhtml,xslt,html,xhtmlshBrushXml.js

[ SyntaxHighlighter 下載 ]
[ SyntaxHighlighter 使用方法 ]
步驟 1.

把下載下來的檔案解壓縮後會看到三個資料夾,分別是 scripts、src、styles,src 這個資料夾不用管它,然後把 scripts 和 styles 這兩個資料夾裡的所有檔案全部上傳到你的網路空間。

步驟 2.

到 Blogger 管理頁面 -> 版面配置 -> 修改 HTML,搜尋</head>,在上方加入以下程式碼。
<link href="你的網路空間的網址/shCore.css" type="text/css" rel="stylesheet"/>
<link href="你的網路空間的網址/shThemeDefault.css" type="text/css" rel="stylesheet"/>
<script src="你的網路空間的網址/shCore.js" type="text/javascript"/>

<script src="你的網路空間的網址/shBrushBash.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushCpp.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushCSharp.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushCss.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushDelphi.js'" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushDiff.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushGroovy.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushJava.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushJScript.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushPerl.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushPhp.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushPlain.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushPython.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushRuby.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushScala.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushSql.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushVb.js" type="text/javascript"/>
<script src="你的網路空間的網址/shBrushXml.js" type="text/javascript"/>
<script src="你的網路空間的網址/shLegacy.js" type="text/javascript"/>

<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = '你的網路空間的網址/clipboard.swf';
    SyntaxHighlighter.config.strings.viewSource='原始碼';
    SyntaxHighlighter.config.strings.copyToClipboard='複製到剪貼簿';
    SyntaxHighlighter.config.strings.copyToClipboardConfirmation='已成功複製到剪貼簿';
    SyntaxHighlighter.config.strings.print='列印';
    SyntaxHighlighter.config.strings.alert='';
    SyntaxHighlighter.all();
</script>
步驟 3.

終於可以開始用囉,使用時,在<pre>...</pre>之間貼上妳的程式碼,並設定好你的程式語言,「程式語言」請參考上面的 [ 語言支援 ] 替換。
<pre class="brush: 程式語言">
   你的程式碼...
</pre>
[ 補充 ]
如果要顯示標籤,例如你要顯示<script>,那麼必須要把「<」替換成「&lt;」,才可以正常顯示喔。

沒有留言:

張貼留言

1. 文章如有錯誤,歡迎指正。
2. 請勿打廣告,違者一律刪。
3. 歡迎您提供寶貴的意見。