AH.: 在 Google Blogger 中嵌入程式碼

本 Blogger 所使用的 Code Block 工具為 SyntaxHighlighter 之 2.1.364 版及 Google Code Prettify，並直接連線至該作者 Alex Gorbatchev 的私人網路空間與 google-code-prettify 網路空間之檔案，達到嵌入程式碼之功能，建置步驟如下：

SyntaxHighlighter 建置說明

1. 開啟 Google Blogger -> 範本 -> 編輯 HTML -> 按 Ctrl+F 搜尋 <head> -> 在下方加入

2. 接下來發表文章 -> 新文章 -> HTML 編輯模式加入
注意， Brush name 要英文小寫

<pre class="brush:小寫的Brush_name">
        程式內容
</pre>

3. Brush_name 的類型如下
(上面範例是用 <pre class="brush:xml"> 顯示內容 </pre>)

Google Code Prettify 建置說明

1. 開啟 Google Blogger -> 範本 -> 編輯 HTML -> 按 Ctrl+F 搜尋 <head> -> 在下方加入：

<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

2. 同樣位置：範本 -> 編輯 HTML -> 按 Ctrl+F 搜尋 /* Posts -> 在/* Posts ----------------------------------------------- */ 的下方加入：

.post .codeblock {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 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;
}

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 。

AH.

2014年7月21日星期一

在 Google Blogger 中嵌入程式碼

沒有留言:

張貼留言

2014年7月21日 星期一

在 Google Blogger 中嵌入程式碼

沒有留言:

張貼留言

2014年7月21日星期一