[BH] 幫 Blogger 加上 "SyntaxHighlighter" 的功能

身為一個工程師，想要寫篇文章放到 blog 時，常常會遇到一個問題。
就是每當想要把程式貼到 blog 時，排版會跑掉，不是用等寬字元的方式在排版。

這時候就要用到一個很好用的 HTML tag：<pre>
用 pre tag 把程式包起來之後，程式碼就會以等寬字去排版。

很好，這樣看起來是解決了一個問題，但是還有另一個問題。
blog 上面的程式碼，沒辦法像一些 editor 一樣，依程式碼的語法去改變顏色。

嗯...在 HTML 要換顏色就是需要套用 css，所以我們可以自己動手去改顏色!?

不!
這當然是交給程式去做就好了。

網路上現在很多專門給網頁用的 syntax highlight 的程式
而我目前是用 SyntaxHighlighter 這套程式
並沒有去比較不同版本的好壞，只是很單純的選這一個

SyntaxHighlighter 加進 Blogger 的流程

1.打開你的 Blogger template 原始碼，找到</head>的 tag，並在前面加上 SyntaxHighlighter 的核心程式：

<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'/>
<!-- add brushes here -->
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

2.再跟據自己 blogger 上的需要，在 <!-- add brushes here --> 的位置加上對應的語法 js。
在 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 裡有詳細說明支援的程式

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.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/shBrushDiff.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/shBrushPhp.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/shBrushXml.js' type='text/javascript'/>

3.完成之後，就可以開始使用 SyntaxHighlighter 了：
一、用 <pre> tag：

<pre class="brush:js">
  alert('hello syntax');
</pre>

用 <pre> tag時，要注意一些 html 的特殊字元要轉成 html 專用的編碼(ex. < 換成 &lt;)

二、用 <script> tag：

<script type="syntaxhighlighter" class="brush:js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>

Reference：
SyntaxHighlighter