最新消息

[公告2014/05/30] 如有需要將部落格中,任何一篇文章的程式碼使用在商業用途,請與我聯繫。

[公告2015/04/26] Line版的 iInfo程式與投資應用 群組已上線想加入的朋友們,請先查看 "入群須知" 再與我聯繫 Line : aminwhite5168,加入請告知身分與回答 "入群須知" 的問題。

[公告2018/04/22] 台北 Python + Excel VBA 金融資訊爬蟲課程,課程如網頁內容 金融資訊爬蟲班:台北班 Python 金融資訊爬蟲、EXCEL VBA 金融資訊爬蟲

[公告2019/01/08] 請注意:我再次重申,部落格文章的程式碼,是要提供各位參考與學習,一旦網頁改版請自行修改,別要求東要求西要我主動修改,你們用我寫東西賺錢了、交差了,請問有分我一杯羹嗎?既然賺錢沒分我,請問有什麼理由要求我修改,如果沒能力改,就花錢來找我上課。

[公告2019/12/01] 若各位有 Excel VBA 案子開發需求,歡迎與我聯繫,可接案處理。

[公告2020/05/22] 頁面載入速度慢,起因為部分JS來源(alexgorbatchev.com)失效導致頁面載入變慢,目前已做調整,請多見諒。

2012年8月16日 星期四

美化部落格的程式碼 使用SyntaxHighlighter

你是否曾想過要在自己的部落格,將原始程式碼包裝有條有理,甚至可以根據不同程式語言的關鍵字進行上色,以提高程式碼的可讀性。
網路上有幾個常見的如下7個地方,在這些地方貼上程式碼後,產生的連結可以嵌入到網頁或部落格中。
  1. GitHub Gist
  2. Dpaste
  3. Chop
  4. Pastie
  5. Plurk Paste
  6. Pastebin
  7. Codepen
  8. Snipplr
  9. Snipt
不過筆者還是喜歡自己來將程式碼放在自己的部落格上,上網找了幾個可以讓程式碼在網上有呈現語法高亮度。
  1. SyntaxHighlighter
  2. Google-code-prettify
  3. highlight.js
  4. jQuery.Syntax
  5. 單純用CSS
最後筆者選擇了SyntaxHighlighter來設定放在部落格的程式碼,SyntaxHighlighter官方公佈的最新版本為3.0.83,建議使用2.x版本的會比較穩定,2.x最後一版為2.1.382,有需要的可以至官方網站索取或下載
我們以Google Blogger來設定SyntaxHighlighter,依照以下的步驟即可簡單擁有漂亮的程式碼。

Step1. Blogger"範本""修改HTML""繼續"

Step2 將下列程式碼貼在</head>之前
<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css" type="text/css"/>
<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css" type="text/css" />
<!-- brush begin -->
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js" type="text/javascript" ></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJava.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPlain.js" type="text/javascript"></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://bsatr111.com/xe/modules/editor/components/code_highlighter/syntaxhighlighter/scripts/shBrushBatch.js' type='text/javascript'/>
<!-- brush end -->
<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
    SyntaxHighlighter.all();    
</script>
Step3. 最後為了讓所有的瀏覽器可以支援,必須在"自訂""進階""新增CSS" 加入下面這段CSS
pre {
 overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 /* width: 99%; */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Step4. 最後將你要存放的原始程式碼貼至pre標籤之間,以及指定原始程式碼所使用的程式語言類型即可
<pre class="brush:html">
貼上原始程式碼
</pre>

最後要將程式碼放進網頁中還要進行HTML Encode(就是將"<" 變成 "&lt;")如此整理好的程式碼在網頁上才不會出問題如果懶自己改可以到下列網址轉換 Text -> HTML Entities Encoder

如對於放上部落格的程式語言不知該使用何種參數,請參考下表的"別名",並且"檔案名稱"也有加入才能支援

程式語言名稱
別名
檔案名稱
as3, actionscript3
shBrushAS3.js
bash, shell
shBrushBash.js
cf, coldfusion
shBrushColdFusion.js
c-sharp, csharp
shBrushCSharp.js
cpp, c
shBrushCpp.js
css
shBrushCss.js
delphi, pas, pascal
shBrushDelphi.js
diff, patch
shBrushDiff.js
erl, erlang
shBrushErlang.js
groovy
shBrushGroovy.js
js, jscript, javascript
shBrushJScript.js
java
shBrushJava.js
jfx, javafx
shBrushJavaFX.js
perl, pl
shBrushPerl.js
php
shBrushPhp.js
plain, text
shBrushPlain.js
ps, powershell
shBrushPowerShell.js
py, python
shBrushPython.js
rails, ror, ruby
shBrushRuby.js
scala
shBrushScala.js
sql
shBrushSql.js
vb, vbnet
shBrushVb.js
xml, xhtml, xslt, html, xhtml
shBrushXml.js

PS:如需要Batch程式碼也能在網頁上有美化效果,可以在google搜尋SyntaxHighlightershBrushBatch.js關鍵字,再引入相關的網頁路徑及可。