網頁中內嵌的程式碼區塊(新)

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

顯示行數在舊文無法做到我想要的樣式,因此參考了 syntaxhighlightergoogle-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>

沒有留言:

張貼留言