最 新 文 章 :

喜歡 M2 這個網站按一下 "讚" 吧!

M2 動畫 ~用滑鼠點擊金魚~

M2 標籤雲

165 (2) 165防詐騙 (2) 分辨真皮 (1) 手工皮革 (20) 手袋 (2) 皮革 (5) 共享 (12) 地理 (1) 位置 (1) 防詐騙 (3) 保養 (1) 查詢 (2) 活動 (5) 紅利 (1) 限量 (8) 時尚 (4) 時間 (5) 時鐘 (2) 書籤 (4) 真皮 (4) 真皮分類 (1) 真皮特點 (1) 配件 (3) 動畫 (7) 菜市場 (1) 新潮 (5) 會員 (8) 網拍 (4) 數位 (4) 獨家 (7) 辨別真皮 (1) 優化 (7) 購物 (5) 小工具 (7) blogger (13) blogger小工具 (10) IP (1) M2 (25) PageRank (1) SEO (2)

2011年10月12日 星期三

Blogger 外掛,顯示漂亮的彩色程式碼

最新的syntaxhighlighter版本已經移到這裡「SyntaxHighlighter  3.0.83」,目前仍有在持續維護。雖然支援的程式語言種類沒有GeSHi那樣包山包海,但對於常見的程式語言來說(如下列表),已經相當夠用了。
AS3, Bash, ColdFusion, CSharp, Cpp, Css, Delphi, Diff, Erlang, Groovy, JScript, Java, JavaFX, Perl, Php, Plain, PowerShell, Python, Ruby, Scala, Sql, Vb, Xml

使用SyntaxHighlighter對網頁的SEO也是有幫助的,因為程式碼在HTML原始碼中是完整的呈現,像Pastebin.com用JavaScript的方式內嵌,實際網頁原始碼根本沒有包含程式碼;同時,在最後輸出給瀏覽器的HTML中,<pre>...</pre>之間是原始的程式碼文字,並不會被加入額外的HTML標籤。所以瀏覽者在搜尋時,關鍵字若出現在網誌提供的程式碼中,文章就會更有機會被找到。

讓人興奮的是,SyntaxHighlighter有提供公開的Hosted Version,這意味著純粹使用Blogger寫網誌,而沒有申請其他檔案寄存服務的使用者,並不用再麻煩地去註冊一個空間來放所需的檔案,也不必偷偷使用別人的連結。設定的步驟相當簡單,請參考以下設定步驟。

SyntaxHighlighter預設已有不錯的行號顯示:

在Blogger的後台,打開「設計」、「修改HTML」。

先找到<b:skin>標籤,在此標籤前加入以下代碼。
<!-- SyntaxHighlighter  3.0.83-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

再找到</body>標籤,在標籤前加入以下代碼。
<!-- SyntaxHighlighter  3.0.83-->
<script type='text/javascript'>
     SyntaxHighlighter.all()
</script>

完成修改後,儲存。

接著在編輯網誌文章時,使用「修改HTML」模式,使用<pre>標籤來呈現程式碼,而class屬性則設為「brush: 程式語言代碼」,程式語言代碼請參考在文章開頭的SyntaxHighlighter已支援程式語言列表。
<pre class="brush: groovy">
println 'Hello World'
println 1 + 2 + 3
</pre>

另一個議題是,當我們要放的程式碼文字,包含了HTML的特殊字元,例如大於>、小於<等,這時候就需要用HTML編碼工具先轉換好,否則Blogger會認為文章包含不合法的HTML標籤。

如果您使用的瀏覽器剛好是先進的Firefox,可以參考我們先前發表過的Blogger HTML Encode文章,使用我們開發的Greasemonkey Script即可以輕鬆解決這個問題。

0 意見:

張貼留言

LinkWithin 縮圖式相關文章

Related Posts Plugin for WordPress, Blogger...

Share This 分享至部落格

表情符號

留言者排行榜

最新回應

載入中...

作者回應文章時高亮度顯示

將 RSS 或 Atom 資訊提供的內容加入網誌

Alexa 網站流量排名

返 回 頂 部 ↑