#程式語言、#Blogger文章崁入程式碼框架
<20150621<在Blogger嵌入程式碼教學 @ 無聊的大學生>>
「範本」、「編輯HTML」，將兩個程式碼貼到指定的位置。 
第一個程式碼要貼到CSS裡，第一個紅框框的位置。
<style>
.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;
}
</style>
第二個程式碼要貼到head的尾端，第二個紅框框的位置。
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
最後，在撰寫文章或網頁時，點選html，貼上程式碼：
<pre class="codeblock prettyprint"> ........ </pre>。完成。
<20141031<在Blogger文章中顯示程式碼區塊及行數 @ WEIDE BOOK>>
調整，程式碼區塊顏色跟行數：
第一個程式碼，
.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;
}
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important; }
第二個程式碼，是
點擊「版面配置」→「新增小工具」，找到「HTML/JavaScript」貼上程式碼：
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>。
最後，在撰寫文章或網頁時，點選html，貼上程式碼：
<pre class="codeblock prettyprint linenums"> ........ </pre>。完成。
<20131101<在網頁中嵌入顯示程式碼：CSS Block @ 符碼記憶>>
第一個程式碼，是
舊版程式碼需放在 html裡面。尋找「/* Posts」，並往下到「.post {」，將程式碼放在 .post {…} 區塊下面。(這單純只是為了之後好找，若對 css 熟悉，也可以放在你想放的地方)
.post .codeblock {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:1000px;
line-height: 1.2em;
}
新版程式碼，放在小工具HTML/JavaScript，比較方便管理。新舊版的差異，主要就是 style 的tag及將gif用另一種格式寫死不用再連線。
<style>
.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;
}
</style>
說明：.post .codeblock 這行是指在class='post' 的 tag 中 (我們發表的文章都有帶)，裡面的 tag 又有 class='codeblock' 的區塊就以獨特的方式顯示，codeblock 這個 class 名稱可以自訂，如 code 等，但要避免與其他 css 衝突。在其他的教學文中第一行也有人直接用 code {，這樣的話要顯示程式碼可以直接用 <code>教學</code>，不過在 blogger 編輯時若在撰寫和 HTML 間切換的話設定就會跑掉，所以我後來還是用 class 的方式。
background 中有個圖片的 url，舊版的程式碼大家要把 gif 下載後放到自己的網路空間。新版程式碼已改用data:image/gif，這樣就不用多一次連線。還有 max-height 是指這個區塊最高能到多高，如果超過的話就會在右方顯示 scroll bar，我為了要讓程式碼區塊能完整顯示，所以設了一個比較大的值。
最後，在撰寫文章或網頁時，點選html，貼上程式碼：
<div class='codeblock'> ......... </div>
若要保持程式的排版，建議使用 <pre> 這段程式：
<pre class='codeblock'> ........ </pre>
用 CSS 方式顯示程式碼，能在blogger 撰寫功能中加上顏色和粗體等效果。若覺得自己上色有點麻煩，可以在完成 Google Code Prettify 的設定後，使用這段程式碼：
<pre class="codeblock prettyprint"> ........ </pre>。完成。
<20120317<在 Blogger 文章中利用 CSS Block 及 @ 夏箖筆記>>
備註：
1. CSS Block 裡的 class "code" 是可以自己改名成 NAME，請記得也要一併更改成 .post .NAME。
2. CSS Block 裡的有個圖片連結 yourweb_images_home 請改成自己置放 Code_BG.gif 的位址。
3. 請不要在 CSS 語法前後加上程式註解，可能會造成程式碼無法正常顯示。
4. 如果，要顯示的程式碼裡有特殊符號像是 < > 字元，請先至 HTML Encode 網頁 進行轉換。 ←這點非常重要，這就是我碰到的bug。
<20130428<GitHub Gist 在部落格、網頁中內嵌入高亮程式碼 - 香腸炒魷魚>>因為碰到一個嚴重bug，看到某網站使用gist功能，就順便剪貼進來。- - 以下剪貼 - -
雖然網路上有很多程式碼高亮(Highlight)的第三方服務，不過有些服務可能只能第一次貼上程式碼，往後並無法修改，或者是服務比較小怕哪邊突然收攤，這些程式碼也會全都不見，不過若是由GitHub提供，我想我們可以放心點，畢竟這個服務目前是眾多人喜歡將自己創作的程式碼丟上去的版本控管系統，有一定的穩定性以及可信度，就連jQuery官方都把所有的專案程式碼丟到上面了，這可是為這個服務打入了一針強心劑。
Gist的好處除了可提供程式碼嵌入外，每一個gist內可以有多個檔案，也就是如果你的教學文章可能有多段的程式碼，可以分成多個檔案在同一個gist，管理上也比較方便，此外也有提供revisions版本控管功能，如果哪天改壞了，還可以看先前的版本還原回去，註冊成為GitHub會員，還可以對程式碼進行討論以及後續維護，若非會員就不能討論留言，而程式碼也沒有revisions功能，只能第一次加入，而且是以匿名使用者儲存這個gist。
