1. 搭配 CodeFormatter,網站須要配合的設定

    題外話,這個 plugins 又有小改版了,原網址可以 [下載]..

    到這邊差不多告一個段落了,歡迎各位下載回去用。只不過有些功能,你的BLOG SERVER要配合調整才會有效。統一說明一下:

    1. CSS

    我喜歡用這個函式庫的主要原因,是因為它長出來的HTML很乾淨,因為樣式的部份都拆出來到CSS了。不過缺點也是你必需另外想辦法把CSS放上去... 附上原廠提供的CSS內容,看你的BLOG SERVER可以怎麼改就怎麼改。以我用的CommunityServer為例,只要進入DashBoard,到修改版面的地方,它提供 "Custom Styles (Advanced)" 頁面,把 CSS 貼進去就搞定了!

    C# Code Formatter CSS[copy code]
    .csharpcode, .csharpcode pre{	font-size: small;	color: black;	font-family: Consolas, "Courier New", Courier, Monospace;	background-color: #ffffff;	/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {	background-color: #f4f4f4;	width: 100%;	margin: 0em;}.csharpcode .lnum { color: #606060; }
    
    .csharpcode, .csharpcode pre
    
    {
    
      font-size: small;
    
      color: black;
    
      font-family: Consolas, "Courier New", Courier, Monospace;
    
      background-color: #ffffff;
    
      /*white-space: pre;*/
    
    }
    
    .csharpcode pre { margin: 0em; }
    
    .csharpcode .rem { color: #008000; }
    
    .csharpcode .kwrd { color: #0000ff; }
    
    .csharpcode .str { color: #006080; }
    
    .csharpcode .op { color: #0000c0; }
    
    .csharpcode .preproc { color: #cc6633; }
    
    .csharpcode .asp { background-color: #ffff00; }
    
    .csharpcode .html { color: #800000; }
    
    .csharpcode .attr { color: #ff0000; }
    
    .csharpcode .alt 
    
    {
    
      background-color: #f4f4f4;
    
      width: 100%;
    
      margin: 0em;
    
    }
    
    .csharpcode .lnum { color: #606060; }
    

    不過別急著貼!!! 如果你想要下一個功能的話,CSS 還要再多貼一段...

     

    2. COPY CODE

    這個功能不難,就透過 JavaScript 把一段文字放到剪貼簿就完成了。不過麻煩的是這些 CODE 怎樣偷渡到文章內容裡... 我用的 CS 預設會把 <SCRIPT> 給檔掉,直接在HTML裡加SCRIPT是行不通的。當然可以改communityserver.config,不過這樣有點麻煩,不喜歡這樣改... 於是我搬出了 HTC..

    HTC 的原理很簡單,CSS是統一管理各種樣式,而DHTML的一堆事件,像 onclick="..." onload="..." 等等事件為什麼不能像CSS一樣統一管理呢? 可以的,只不過這就要靠 IE 才支援的 HTC (HTML Component) 才辦的到。後起之秀JQuery其實也有差不多的功能,不過要搭配 CS 的話,一樣得想辦法把 <SCRIPT> 給藏到HTML裡有點麻煩... 所以最後我還是選用 HTC 的方式來實作這個功能。

    設定很簡單,CSS 再加一段就好:

    加上HTC支援的CSS[copy code]
    .copycode {cursor:hand; color:#c0c0ff; display:none; behavior:url('/themes/code.htc'); }
    
    .copycode {cursor:hand; color:#c0c0ff; display:none; behavior:url('/themes/code.htc'); }
    

    再來就是把這個 HTC 檔案放到 CSS 裡指定的目錄,以上面的CSS來說,你應該把HTC放在 /Themes/Code.HTC

     

     

    SERVER 的部份這樣就大功告成了。未來在插入CODE時,只要勾選這個選項 [產生出來的HTML會包含原始程式碼]:

    image

     

    最後輸出的成果就會像這樣,標題右方的 [copy code] 功能就正常了。按下去之後,SAMPLE CODE 就會自動複製到剪貼簿,不會因為加了一堆格式,讓你複製下來的 CODE 不能直接使用...

    MSDN Sample Code[copy code]
    using System;public class Sample {    void Method() {    Object Obj1 = new Object();    Object Obj2 = new Object();    Console.WriteLine(Obj1.Equals(Obj2)); //===> false    Obj2 = Obj1;    Console.WriteLine(Obj1.Equals(Obj2)); //===> true    }}
    
       1:  using System;
    
       2:   
    
       3:  public class Sample {
    
       4:      void Method() {
    
       5:      Object Obj1 = new Object();
    
       6:      Object Obj2 = new Object();
    
       7:      Console.WriteLine(Obj1.Equals(Obj2)); //===> false
    
       8:      Obj2 = Obj1;
    
       9:      Console.WriteLine(Obj1.Equals(Obj2)); //===> true
    
      10:      }
    
      11:  }
    

     

     

    這個功能,在預覽的時後就沒加上去了。另外預覽的畫面也做了點調整,一方面不是直接用IE開啟HTML檔,因為這樣會有一堆安全警告的訊息,我改用HTA (HTML APPLICATION)來實作預覽的功能。為了感謝提供這個LIB的原作者,我也在預覽的畫面裡加上他的首頁了。最後,當然也要讚助一下我自己的網站... 哈哈 [H]

    image

     

    好,這個PLUGINS大概就告一個段落,未來大概就修正BUG了,需要的人歡迎下載使用。如果要散佈請注明出處。

    [下載位置]

    2008/04/04 .NET 作品集 技術隨筆

  2. [RUN! PC] 2008 四月號

    IMG_6727 (Canon PowerShot G9) 沒錯,我的文章在四月號的 RUN! PC 刊出來了,之前花了些時間在研究執行緒跟 ASP.NET 搭配起來用的技術問題,有點小心得,就整理了一下投稿了,運氣還不錯,雜誌社也願意刊出。初次投稿花了不少時間,花在重新思考 sample code 怎麼寫比較能突顯主題,圖表要怎麼畫才清楚明瞭等等瑣事上面,原來當個專欄作家 (我沒有專欄啦,只是投稿而以) 也不是這麼簡單的... 文章的內容嘛,看雜誌就知道了,這篇是留著作個紀念,同時也是讓看了這篇文章有話要說的讀者們,有個留下 comments 的地方。 文章裡提到的 sample code 可以到 [這裡] 下載,懶的抓回去執行的人,也可以直接到 [這裡] 試 RUN 看看文章裡提到的範例。 在執行這個範例程式之前,請先注意一下,IE預設只會對同一個網站建立兩個Http Connection,因此有可能會看到不一樣的測試結果。如果想要調大這個限制,請修改下列的註冊機碼,或是下載本文的範例程式,匯入[IE.reg]註冊機碼。 調整IE同時連線數的註冊機碼

    [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings]
    
    "MaxConnectionsPerServer"=dword:00000008
    
    "MaxConnectionsPer1_0Server"=dword:00000008
    
    相關連結: [範例程式下載] [執行範例程式] [下載調整IE連線上限的註冊檔]

    2008/04/04 RUN! PC 專欄文章 .NET ASP.NET RUN! PC 技術隨筆 有的沒的

  3. BotCheck 改版...

    有鑑於好奇心強的網友,回應時老愛研究 BotCheck 跟內容的關聯性... (Honga 就是你...),一時興起把 BotCheck 的 ASCX 改寫了一下,會在驗証通過時,把 BotCheck 的題目及答案附加在 comment 的後面,就像這樣:

    image

    免的每次都在那邊貼這次的 BotCheck 是啥.. 哈! 特此留念!

    2008/04/01 .NET ASP.NET 作品集 有的沒的

  4. Code Formatter 更新: 複製CODE及HTML預覽

    無聊的宅男沒事又改起這個Live Writer的外掛程式了。原本的版本還不錯用,不過就是覺的少了點什麼... 除了加個框之外,跟網站版本也沒什麼差別嘛。用了一陣子,又加了兩個小功能上去...

     

    COPY CODE

    這個功能是從MSDN學來的,MSDN文章的範例程式碼,都會附個鈕讓讀者按,按一下程式碼就會被覆製到簡貼簿... 這個功能還蠻實用的,因為我常常這樣貼... 哈哈,不曉得看我 BLOG 的人有沒有這習慣? 不管了,我的BLOG,我寫的PLUGINS,我說好用的東西當然要加上去... 底下是改版後的外掛程式,張貼程式碼的樣子:

    ----------------[以下開始]------------------

    測試用的 C# Code Sample..[copy code]
            //        // 不重要的程式碼... 拿來當 Model 用的...        //        private int CountLeadingSpaces(string line)        {            int count = 0;            foreach (char ch in line)            {                if (ch == ' ')                {                    count++;                }                else                {                    break;                }            }            return count;        }
    
       1:  //
    
       2:  // 不重要的程式碼... 拿來當 Model 用的...
    
       3:  //
    
       4:  private int CountLeadingSpaces(string line)
    
       5:  {
    
       6:      int count = 0;
    
       7:      foreach (char ch in line)
    
       8:      {
    
       9:          if (ch == ' ')
    
      10:          {
    
      11:              count++;
    
      12:          }
    
      13:          else
    
      14:          {
    
      15:              break;
    
      16:          }
    
      17:      }
    
      18:      return count;
    
      19:  }
    

    ----------------[結束]-----------------------

     

     

    HTML PREVIEW

    另一個無聊的功能,是過去在寫些HTML相關的文章,常常要做這樣的動作: 一方面要想辦法把HTML秀到網頁上,就得用這種外掛來處理,不過另一方面又要讓讀者直接看一下HTML顯示出來的效果,一樣的CODE又要切到HTML編輯模式貼一次... 這次就是要省掉這個懶人工夫... 一次到位。來試一下這個功能:

    ----------------[以下開始]------------------

    HTML測試[copy code]
    <H3>這是H3的效果</H3><H3>這是H3的效果</H3><H3>這是H3的效果</H3><H3>這是H3的效果</H3><H3>這是H3的效果</H3>
    
       1:  <H3>這是H3的效果</H3>
    
       2:  <H3>這是H3的效果</H3>
    
       3:  <H3>這是H3的效果</H3>
    
       4:  <H3>這是H3的效果</H3>
    
       5:  <H3>這是H3的效果</H3>
    


    HTML Preview

    這是H3的效果

    這是H3的效果

    這是H3的效果

    這是H3的效果

    這是H3的效果

    ----------------[結束]-----------------------

     

    好,展示完畢,沒什麼突破的進展,純粹自己好用而以[H]。我也不曉得有沒有人在用,懶的打包放網站了,需要的人再跟我要...

    2008/03/31 .NET HTML/CSS 作品集 有的沒的

  5. WLW Plugins: Code Formatter

    最近常常貼一些需要附上程式碼的文章, 我都借助 [c# code format] 這網站幫忙轉, 轉成好看一點的 HTML code.. 然後 Live Writer 切到原始碼的模式去改 HTML, 然後再切回來際續編...

    人果然是懶惰的動物, 之前久久寫一篇還好, 最近就開始不耐煩了... 試了一套 Syntax Highlight 的 WLW plugins, 畫面不錯, 不過中文會亂掉.. 想說 c# code format 這網站的主人有 share source code, 我就把它拿來包成 Windows Live Writer Plugins 好了...

    就是這念頭開始寫這個 project, 蠻好寫的, 兩三個小時過去就堪用了, 經過幾天試用慢慢改成現在的樣子, 先現寶一下, 放幾張圖:

     

    [圖 1] 編輯畫面
    image

     

    [圖 2] 預覽畫面 (底下當然要加點廣告... )
    image

     

    結果就不用貼圖了, 底下這段就是用這 plugins 貼進來的...

     

    [程式 1] 這是測試程式

       1:  using System;
    
       2:  using System.IO;
    
       3:  using System.Threading;
    
       4:   
    
       5:  public class Program {
    
       6:    public static void Main(string[] args) {
    
       7:      Console.WriteLine("Hello!!" );
    
       8:    }
    
       9:  }
    

     

    看起來效果還不錯, 雖然跟之前差不多, 不過手工的部份少很多, 貼上, 按 OK, 就收工了! 這個 c# code format 提供的 library 還不賴, 效果也是我試用幾種 lib 後比較滿意的, 滿意的地方是:

    1. Pure C# 開發的, 程式很短, 不過看的出作者功力不錯, 架構啥都棒.
    2. 用習慣了, 之前都用它網站版本的. 很熟悉它轉出來的格式.
    3. 轉出來的 code 比較乾淨. 不過它需要另外搭配它的 CSS.
    4. Unicode, 沒有什麼中文亂碼的問題.

    當初最主要用它的原因就是 (3), 其它捨棄 CSS 的結果, 就是產生出來的 HTML 參著一大堆 color code, 老實說這種 HTML code 看起來就很痛苦. 我是不想看啦, 不過我必需切到 HTML view 去貼上這堆字啊...  c# code format 雖然要另外補上 .css, 不過看起來就清爽多了. 我直接把它附的 CSS 貼到我用的 community server 的 custom themes 裡 (部落格管理裡面就可以直接加, 不用改檔案), 用起來就很輕鬆愉快了 :D

    要來看 code 嗎? 其實 code 就沒什麼好看的了, 需要的直接抓回去看吧. 倒是不常寫 WinForm 的我, 竟然被內建的 ComboBox 小整了一下... WinForm 內建的 ComboBox 功能很完整, Items 可以放 object, 然後再指定 ValueMember, DisplayMember... blah blah. 當然也有直接提供最簡單的 Text Editor, 一行字就是一個 Item ...

    image

    不過, 我要的是很簡單的 Value / Display 分別指定就好, 就是這個 plugins 讓 user 選擇格式的地方 (如上圖), 我希望第一項的 Value 是 "HTML", 而顯示的是 "HTML / XML / ASP.NET", 這樣簡單的要求, 我心裡想... 這麼簡單, 一定可以直接用 Designer 填一填就搞定, 不用再去寫 code, 就可以 init 完成..

    沒想到找了半天還真的找不到! :@ 翻了 MSDN, Microsoft community 等等技術支援網站通通都沒有. 教的都是一堆我覺的拖褲子放屁的作法... 不過是五個固定的選單而以啊...

    到最後, 宣告放棄, 妥協了... 我這個功能最後是用這幾行 code 搞定的... ㄨ!!! 本來一行 code 都不想寫的...

     

    替 ComboBox 設定初始值的程式碼片段:
       1: comboBox1.DisplayMember = "Value";
    
       2: comboBox1.ValueMember = "Key";
    
       3: comboBox1.Items.Add(new KeyValuePair<string, string>("HTML",  "HTML / XML / ASP.NET"));
    
       4: comboBox1.Items.Add(new KeyValuePair<string, string>("CS",    "C#"));
    
       5: comboBox1.Items.Add(new KeyValuePair<string, string>("VB",    "Visual Basic.NET"));
    
       6: comboBox1.Items.Add(new KeyValuePair<string, string>("MSH",   "MSH (PowerShell)"));
    
       7: comboBox1.Items.Add(new KeyValuePair<string, string>("SQL",   "T-SQL"));
    
       8: comboBox1.SelectedIndex = 1;
    

     

    哈, 最後這邊收的不大漂亮, 不過不管了, 還好沒幾行. 這個 plugins 需要的就自己抓去用吧, 以後可能會不定時更新. 有啥改進意見可以留話給我, 不過嘛, 當然是有空 & 想改才有動力去開 visual studio .. [H]

     

    --
    下載: code formatter plugins

    2008/03/08 .NET 作品集