如何在 Blogger 加入程式段落 Part 1: 純 CSS 與 Google Code Prettify

緣起

如何在 Blogger 插入程式段落, 是寫資訊技術文章必備的能力; 這樣才能讓讀者能更易於閱讀.

以下為主要步驟並區分為是否採用 Google Code Prettify 而有不同效果呈現:

不採用 Google Code Prettify

(1) 修改預設的 Html 範本

修改範本 Html

(2) 修改預設的 Html 範本: 加入 CSS 設定,
內容請參考以下呈現的範例 (2): 含 Html tag 的 < 或 > 符號

修改範本 Html: 加入 CSS 設定

(3) 修改本身的網頁: 加入 <pre class='codeblock'> ...
若含有 Html tag 的 < 或 > 符號, 要記得作 Html Encoding

在本身網頁加上 <pre class='codeblock'> ,,,

注意: Html Encoding

以下為實際效果呈現:
(1) 不含 Html tag 的 < 或 > 符號

//
// POST: /Member/Create

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Member member)
{
    if (ModelState.IsValid)
    {
        db.Members.Add(member);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(member);
}

(2) 含 Html tag 的 < 或 > 符號

<style>
  .codeblock {
 display: block; /* fixes a strange ie margin bug */
 font-family: Courier New;
 font-size: 10pt;
 overflow:auto;
 background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
 border: 1px solid #ccc;
 padding: 10px 10px 10px 21px;
 max-height:1000px;
 line-height: 1.2em;
 }
</style>

採用 Google Code Prettify

(1) 修改範本Html: 加入 Google Code Prettify

修改範本Html: 加入 Google Code Prettify

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

(2) 修改本身的網頁: 加入 <pre class='prettyprint linenums'>

套用至本身的網頁

以下為實際效果呈現, 但請注意 Line Number 只會出現 5, 10, 15 ... 這種值; 然而, 請注意, 實際手工複製程式碼時, 會連同 Line Number 一併複製 !!!

    public ActionResult Create(Member member)
    {
        if (ModelState.IsValid)
        {
            db.Members.Add(member);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
    
        return View(member);
    }

總結

關於程式段落的部份, 相關設定如下:
1. 範本 Html

<!-- added by jasper -->
    <style>
        .codeblock {
        display: block; /* fixes a strange ie margin bug */
        font-family: Courier New;
        font-size: 10pt;
        overflow:auto;
        background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
        border: 1px solid #ccc;
        padding: 10px 10px 10px 21px;
        max-height:1000px;
        line-height: 1.2em;
        }
    </style>
<!-- added by jasper -->
<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>

2. 自身網頁設定: <pre class="prettyprint linenums">

<pre class="prettyprint linenums">
    public ActionResult Create(Member member)
    {
        if (ModelState.IsValid)
        {
            db.Members.Add(member);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
    
        return View(member);
    }
</pre>

上述語句的執行結果如下:

    public ActionResult Create(Member member)
    {
        if (ModelState.IsValid)
        {
            db.Members.Add(member);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
    
        return View(member);
    }

3. 若是2者合併顯示, 發現程式碼, 會跑到左方 CODE 文字區塊; 要特別注意. <pre class="codeblock prettyprint linenums">

<pre class="codeblock prettyprint linenums">
    public ActionResult Create(Member member)
    {
        if (ModelState.IsValid)
        {
            db.Members.Add(member);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
    
        return View(member);
    }
</pre>

上述語句的執行結果如下:

    public ActionResult Create(Member member)
    {
        if (ModelState.IsValid)
        {
            db.Members.Add(member);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
    
        return View(member);
    }

傑士伯的IT學習之路

2014年7月22日星期二