dllee

※ 2008-10-30 因flyup已關閉 blog，補上相關資料。
　 本頁開啟速度會很慢，請耐心等待... 絕對值得您多等個幾分鐘的
※ 2008-11-01 找到正確貼程式的方式，同時也不再變慢了喲

flyup最近發表了高亮度語法顯示-在天空部落應用，總算是解決了我長久以來想在 blog 上貼程式碼的困擾。
flyup 利用 googlepages 可儲存 100MB 的檔案空間，將 SyntaxHighlighter 的 js/css/flash 檔，直接放到 googlepages 上，再利用 blog 可自定欄位的方式，巧妙完成連結，真是太棒了
我把 SyntaxHighlighter 的所有 js 組成一個大檔 shAll.js，這樣在引用時，就不用花那麼多行，應該可以加快一點速度。以下是測試貼 C# 的code：

    private void timer1_Tick(object sender, EventArgs e)
    {
      if(iY==0)
        this.label1.Text = iX.ToString();
      else
        this.label1.Text=iX.ToString() + " × " + iY.ToString() + " = " + (iX*iY).ToString();
      {
        player.Stream = Number[iX];
        player.Stream.Position=0;
        player.Play();
        Thread.Sleep(750);
        player.Stream = Number[iY];
        player.Stream.Position = 0;
        player.Play();
      }
      iY=iY+1;
      if(iY>9)
      {
        iY=0;
        iX=iX+1;
        if(iX>9)iX=2;
      }
    }

使用時，用 textarea 指定 name="code" class="原始碼類型" rows="row數" cols="col數" 或是使用 pre 指定 name="code" class="原始碼類型" 即可產生原始碼高亮度顯示的效果。不過，我發現，在天空部落使用時，還有一個問題，就是自動斷行的判斷。
目前我只有試出，在使用一般編輯器下並關閉自動斷行時，可以產生較佳效果，不然，可能會多換行或是多出 br 的 tag。

---

2008-10-30 因flyup已關閉 blog，補上要顯示高亮度原始碼的相關資料。

[1] 先找一個網路空間可以放檔案，該網路空間必需支援檔案外連，也就是不需要登入就可以下載檔案的空間。例如：google 的 Page Creator有 100M 的空間，或是 seednet 的 miroko 免費會員有 5G 的網頁空間，免費會員每天有 2G 的外連流量(對 blog 來說，很夠了)。

[2] 到http://code.google.com/p/syntaxhighlighter/下載 SyntaxHighlighter_1.5.1.rar，解壓檔案，把以下目錄內的檔案，都放到您的網路空間[1]
\dp.SyntaxHighlighter\Scripts\
\dp.SyntaxHighlighter\Styles\

[3] 在您的 blog 可自定的欄位內，加入以下的 code

<link href="http://YourWebSpace/shSyntaxHighlighter.css" rel="stylesheet" type="text/css">
<script language="javascript" src="http://Your.Url/shCore.js"></script>
<script language="javascript" src="http://Your.Url/shBrushCpp.js"></script>
<script language="javascript" src="http://Your.Url/shBrushCSharp.js"></script>
<script language="javascript" src="http://Your.Url/shBrushCss.js"></script>
<script language="javascript" src="http://Your.Url/shBrushDelphi.js"></script>
<script language="javascript" src="http://Your.Url/shBrushJava.js"></script>
<script language="javascript" src="http://Your.Url/shBrushJScript.js"></script>
<script language="javascript" src="http://Your.Url/shBrushPhp.js"></script>
<script language="javascript" src="http://Your.Url/shBrushPython.js"></script>
<script language="javascript" src="http://Your.Url/shBrushRuby.js"></script>
<script language="javascript" src="http://Your.Url/shBrushSql.js"></script>
<script language="javascript" src="http://Your.Url/shBrushVb.js"></script>
<script language="javascript" src="http://Your.Url/shBrushXml.js"></script>
<script>
dp.SyntaxHighlighter.ClipboardSwf = 'http://Your.Url/shclipboard.swf'; 
dp.SyntaxHighlighter.HighlightAll('code');
</script>

記得把其中的 Your.Url 改成您的網路空間網址，另外，如果您用不到特定的原始碼類型，可以把那一行刪除。
我原本文中所提到的，就是我把 sh*.js 都貼成一個檔案，取名 shAll.js，這樣，就只需要引入它就行了。

[4] 之後，在您需要使用時，套用以下的方式產生高亮度文字。

<pre name="code" class="原始碼類型">
...您的原始碼放在這兒...
</pre>

或是

<textarea name="code" class="原始碼類型" rows="row數" cols="col數">
...您的原始碼放在這兒...
</textarea>

[註] 目前的瀏覽器對於 pre 內的文字還是會作處理，像是您瀏覽本頁時，肯定要等很久，因為它正試著連到 Your.Url 這個網址去。此外，天空部落對於任何 HTML TAG 內的各項屬性也都會作處理，導致您貼的原始碼，有可能遭到天空部落的編輯器自動修改，像是這篇「天空部落+FunP按鈕測試完成」

---

2008-11-01 我一直誤會天空小尖兵，真是非常抱歉呀 一直以為是新的編輯器會導致貼原始碼顯示異常，原來是 HTML 的 pre 這個 TAG 本身並不是完全不處理內部的文字，這也是導致原本本頁瀏覽速度變慢的問題，因為瀏覽器還是去處理了 pre 內的 script 連結
使用 Syntaxhighlighter 正確用法：
先將您要顯示的原始碼作文字取代，
把 < 用 &lt; 取代
把 > 用 &gt; 取代
再按前述，放在 pre 或 textarea 內，就可以完全正常顯示原始碼的內容了。