BLOGGER 在文章中顯示漂亮的程式碼區塊

參考 雲端書影 : 利用樣式表　在文章中顯示漂亮的程式碼區塊
但是依照 雲端書影 大大 寫的方法一直試不出來!!
應該是Blogger的HTML範本改版的關係!!
所以貼的地方可能要改變一下!!
經小弟不屈不撓的交叉試驗下!!終於找到地方貼了!!
請大家參考一下囉!!^^


粉紅色字代表:背景圖網址,你也可以貼上自己圖檔的網址!!
/* blogger 文章中可以顯示漂亮的程式區塊開始 */
code {
    display: block;
    font-family: Courier New;
    font-size: 9pt;
    overflow:auto;
    background: #EAEAEA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYuBiIdXO-iwpxjOp9sJvrJGYwYIJgJCSEYxQS7OLfx4OgsHWoXi2e8Q2PIF48Z2oYJNGFhxi-k8uBTsit_Ei7jaLhWjVBGRpyb1darP4e5Nv612glYs0UP93wJyMVUmbyeYRRNYAyNMF/s1600/Code_Background.png) left top repeat-y;
    border: 1px solid #000;
    padding: 10px 5px 10px 23px;
    min-height:30px;
    max-height:720px;
    line-height: 1.2em;
}
/* blogger 文章中可以顯示漂亮的程式區塊結束 */

也可以自選喜歡的顏色樣式 , 請至下面網址下載打包回去使用 :
程式碼樣式表圖庫


將上面程式碼全部COPY , 開啟Blogger的"設計"=>"修改HTML範本"找到下面程式碼!!
在 語法貼在這裡 的地方"貼上"語法,記得按下"儲存範本"
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Travel
Designer: Sookhee Lee
URL:      www.plyfly.net
----------------------------------------------- */
語法貼在這裡
/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#882222"/>

然後再寫新文章的時候,用"修改HTML"介面編寫文章:
需要貼語法或程式碼時,用<code> </code>包覆起來即可!
<code>
把要顯示的程式碼放在這裡即可
</code>