2014年7月21日 星期一

在 Google Blogger 中嵌入程式碼

Google Code Prettify 建置說明

1. 開啟 Google Blogger -> 範本 -> 編輯 HTML -> 按 Ctrl+F 搜尋 <head>  -> 在下方加入：
<span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"</span><span class="tag">&gt;&lt;/script&gt;</span>

2. 同樣位置：範本 -> 編輯 HTML -> 按 Ctrl+F 搜尋 /* Posts  -> 在/* Posts ----------------------------------------------- */ 的下方加入：
  1. <span class="pun">.</span><span class="pln">post </span><span class="pun">.</span><span class="pln">codeblock </span><span class="pun">{</span>
  2. <span class="pln">display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* fixes a strange ie margin bug */</span>
  3. <span class="pln">font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Courier</span><span class="pln"> </span><span class="typ">New</span><span class="pun">;</span>
  4. <span class="pln">font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10pt</span><span class="pun">;</span>
  5. <span class="pln">overflow</span><span class="pun">:</span><span class="kwd">auto</span><span class="pun">;</span>
  6. <span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;</span>
  7. <span class="pln">border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ccc;</span>
  8. <span class="pln">padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">21px</span><span class="pun">;</span>
  9. <span class="pln">max</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="lit">1000px</span><span class="pun">;</span>
  10. <span class="pln">line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.2em</span><span class="pun">;</span>
  11. <span class="pun">}</span>
3. 發文章的使用方法與上述類似：新文章 -> HTML 編輯模式加入標籤，共有三種類型：

類型一：
<pre class="codeblock">
        程式內容
</pre>
類型二：
<pre class="prettyprint">
        程式內容
</pre>
類型三：
<pre class="codeblock prettyprint">
        程式內容
</pre>

注意，當要顯示 HTML 語法時，顯示內容有標籤符號，必須要使用 HTML Encoder 或 Coder's Toolbox 先進行轉換。

提醒，在範本中加入 script 會佔用到網路，可能會影響到 blogger 的載入速度，可以將不常用的 code 類型之 .js 檔註解掉，減少不必要的 onload 。
於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)