2007/10/24

在文章中加入有顏色的程式碼

網路上的教學大多是以CSS去控制,讓程式碼顯示在一個區塊內,
但是離我要的還有段差距...

為了讓程式碼看起來更有可讀性,我找到了另一種方式,還不錯用...

首先,到c# code format ,把你的程式碼貼到text box裡,
然後按下「formate my code」按鈕 ,就會看到formate過後的程式碼,
將「HTML 4.01 Code」下方的text box裡的code , copy 到自己的文章裡頭就可以了...
在下方有一行字:
To display the formatted code on your site, you need to get this CSS stylesheet, and add a reference to it in the section of your page:


點選stylesheet可以下載css檔,他提供的有c#、vb、html/xml/aspx 、t-sql ...等等
若要網站都能呈現以上程式碼的樣式的話,那要分別將下載的css內容放到blog裡,
這樣才能正常的顯示...

我是把下載下來的程式碼,放在/* Variable definitions的上方,如下:




<!-- code formatted by http://manoli.net/csharpformat/ -->

.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; }


/* Variable definitions
====================


這樣就可以正常顯示了,範例:



void Session_Start(object sender, EventArgs e)
{
this.Application.Lock();
//記錄現在線上人數
int OnlineNum = Convert.ToInt32(this.Application.Get("who_online"));
this.Application.Set("who_online", OnlineNum + 1);
this.Application.UnLock();

}
當然也是可以顯示行號的:


   1:      void Session_Start(object sender, EventArgs e)

   2:      {

   3:          this.Application.Lock();

   4:          //記錄現在線上人數    

   5:          int OnlineNum = Convert.ToInt32(this.Application.Get("who_online"));

   6:          this.Application.Set("who_online", OnlineNum + 1);

   7:          this.Application.UnLock();

   8:   

   9:      }



沒有留言:

軟體工程的重要的指標