2010年6月30日 星期三

在Blogger文章中插入程式碼

  參考了幾個網站,有的華麗複雜,有的功能太多,對我來說太難。
  最後參考了這個網站Huan-Lin 學習筆記,終於把css加上了。

  留下筆記以備將來不時之需。

  因為要使用到圖片,故先將圖片上傳到網站備用。

  再將以下這段css程式碼加到目前使用的版模,同樣的放到post-body的上方。
<style type='text/css'>
.code {  /* 一般程式碼樣式 */
    background: #f0f0f0 url(http://你的網站/bg_code.gif) repeat-y scroll left top;
    display: block; /* fixes a strange ie margin bug */
    border: 1px solid #CCCCCC;
    color: #333333;
    font-family: Courier New;
    font-size: 10pt;
    overflow:auto;
    border: 1px solid #ccc;
    padding: 10px 10px 10px 21px;
    max-height:400px;
    line-height: 120%;
    width: 50%;
}

.csharpcode, .csharpcode pre
{
    font-size: small;
    font-family: &quot;Courier New&quot;, Courier, Monospace;
    /*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; }

</style> 


  如果程式碼裡有<或>符號需先轉碼,可到HTML Encoder 預作轉換。

沒有留言:

張貼留言

Related Posts with Thumbnails