2014年10月31日 星期五

【其他】在Blogger文章中顯示程式碼區塊及行數


要如何在Blogger文章裡面,顯示像下方這樣的程式碼區塊及行數呢?
測試Code

我參考了這位大大的設定方式:http://www.ewdna.com/2012/02/css-block.html
自已做了一些修改,方式如下:

Step 1.先複製下方的CSS程式碼。
/**
 * 這些是我自已的設定,你們可以按照自已的習慣來設定。
 * 第9行: font-family: Consolas; //我用的字型是「Consolas」
 * 第10行: font-size: 13pt; //我設定了字體大小。
 * 第12行: background: #FFFFFF //我的程式碼區塊背景色用白色
 */
.post .codeblock {
 display: block;
 font-family: Consolas;
 font-size: 16pt;
 overflow:auto;
 background: #FFFFFF 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;
}

Step 2.進入Blogger管理頁,點擊「範本」→「自訂」。

Step 3.點擊「進階」→「新增 CSS」,在右邊大框框上,貼上 Step 1.複製的程式碼後,按下「套用至網誌」。

Step 4.開啟新文章,點擊「HTML」,在內文裡,貼上下方程式碼,這樣就完成設定。

<pre class="codeblock">
測試Code
</pre>

為什麼我的程式碼區塊沒有顏色跟行數呢?

來! 還要再設定幾樣,很簡單,方法如下:

Step 5.一樣到Blogger管理頁,點擊「版面配置」→「HTML/JavaScript」→「編輯」。

等等,為什麼我沒有「HTML/JavaScript」 這個項目,沒關係,請這樣設定:

Step 6.點擊「版面配置」→「新增小工具」,找到「HTML/JavaScript」→「點 +」。

Step 7.好了,回到主題,在Step 5.點擊「HTML/JavaScript」→「編輯」之後,在內容裡面,貼上下方程式碼後,按下「儲存」。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Step 8.Step 3.貼的CSS下面,再貼上下方代碼後,按下「套用至網誌」。
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important; }

Step 9.Step 4.內文中,貼上下方程式碼,即完成設定。
<pre class="codeblock prettyprint linenums">
測試Code
</pre>

沒有留言:

張貼留言