2009年7月13日 星期一

在blog中顯示程式碼區(code block)

若在blog中貼上一段程式碼, 往往會不容易閱讀, 這裡來介紹如何作一個程式碼的區塊.

資料來源:http://chenkaie.blogspot.com/2006/11/css-cool-blockquote-for-code-style.html

1. 修改版面配置
到"修改版面配置"選擇"修改HTML", 如下圖所示:




2. 加上code{}語法
在body{}之後, 加上以下語法

code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #fff5ee url(http://sites.google.com/a/hc888.com.tw/file/img/Code_BG0.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 0 0 15px;
}

3. 在文章中使用code語法
因此若要使用<code> tag,方法如下
<code>程式碼放置處</code>


如下面範例所示:

namespace WpfApplication1
{
///
/// Interaction logic for Window1.xaml
///
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
}
}

沒有留言:

張貼留言