網頁中內嵌的程式碼區塊（新）

舊文：網頁中內嵌的程式碼區塊

顯示行數在舊文無法做到我想要的樣式，因此參考了 syntaxhighlighter 和 google-code-prettify 等 2 種可以顯示行數的 Javascript，最後決定用 google-code-prettify，為什麼呢？簡單，而且複製程式碼不含數字，但缺點就是會拖慢網頁速度。

步驟一、下載程式碼並放到個人的網路空間，我是放在 Dropbox 上，因為程式碼要指定 script 和 css 的路徑。

步驟二、修改 Blogger 的 HTML，加入以下內容。
<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='prettyPrint()'>
<script src='https://dl.dropbox.com/u/29695813/google-code-prettify/src/prettify.js' type='text/javascript'/>
<link href='https://dl.dropbox.com/u/29695813/google-code-prettify/mycss/sons-of-obsidian.css' rel='stylesheet' type='text/css'/>

步驟三、自訂css格式，修改sons-of-obsidian.css內容。
ol.linenums
{
　　margin-top: 0;
　　margin-bottom: 0;
　　line-height: 1em;
}
.prettyprint {
　　background: #ffffff;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
　　color: #000000;
　　list-style-type: decimal;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
　　background: #E8E8E8;
}
步驟四、刪除原背景圖 background: #f0f0f0 url(https://dl.dropbox.com/u/29695813/code_background.jpg) left top repeat-y;
步驟五、使用方法
不顯示行數：<code class="prettyprint">程式碼</code>
不顯示行數：<code>程式碼</code>
顯示行數：<code class="prettyprint linenums">程式碼</code>
張貼者： 於
標籤：

沒有留言:

張貼留言