2013年11月1日

在網頁中嵌入顯示程式碼:CSS Block


 






全系列顯示效果比較已完成,可參考:
在網頁中嵌入顯示程式碼:全系列效果比較及教學整理
選擇自己較想要的效果後再進入單篇文章看每種外掛的設定教學。

三年多前開始在部落格中放上程式碼記錄自己的學習和解決的問題時,
我找到了 HighLight 這個程式,安裝軟體後將程式碼轉換為 html,
而後再直接放到部落格文章中嵌入顯示,
相關的說明文章在:在網頁中嵌入顯示程式碼:HighLight

在多年後,有時會覺得我想放上的並不是一大篇的程式,
而只是小小一段設定檔如:css 的連結設定、javascript的設定檔等,
這時如果還要將設定貼進軟體作軟換,感覺就有點太廢工了。
我只是想要在文章中顯示,想要有個特別的區塊讓程式碼可以突出啊!

後來有一天又看到在他人的部落格中很常見的程式顯示區塊,
像這樣的:
顯示程式碼

因為覺得這種顯示方式相當簡潔且清楚,
於是終於在Blogger Code block_文章顯示程式碼區塊找到設定的方式,
他是透過 CSS 的方式來展現程式碼,
對於可以更改 CSS 的部落格如現在所使用的 Blogger,
只要依下面的教學將設定的程式碼嵌入 template 中即可。


嵌入步驟(以Blogger為例):
第一步:(新版程式碼已不需要修改 html,直接看第二步)
進入Blogger後台(登入後在Toolbar右上點選設計),
選擇範本 -> 修改HTML -> 繼續。

第二步:
(2013.11.01更新)
先前的舊版程式碼需放在 html裡面,
現在建議放在HTML/JavaScript小工具裡比較方便管理!
藍色的部份是新舊版的差異,主要就是style的tag及將gif用另一種格式寫死不用再連線。

直接新增一個HTML/JavaScript小工具,位置任意擺,建議放在最下面,
名稱空白,內容填入以下整段程式碼。
<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,仍留著做記錄。
用 browser 的尋找功能找到「/* 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;
}


第三步:
編輯程式碼時在 tag 中加上 class='codeblock',
如這段程式:<div class='codeblock'>class 教學</div>
顯示出來的效果為:
class 教學

另外如果要顯示的是程式碼,常常會有縮排等排版,
這時若要保持程式的排版,建議使用 <pre> 這個標籤,
如下面這段程式:
<pre class='codeblock'>
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
</pre>

顯示出來的效果為:
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

注意:
如果程式中有角括號等會影響 html 顯示的字元,
得先用 Html Encode 工具 將程式轉換。

用 CSS 方式顯示程式碼還有個好處,
就是自己可以在blogger 撰寫功能中加上顏色和粗體等效果,如:
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

若覺得自己上色有點麻煩,下一篇的 Google Code Prettify 也可以和這篇結合,
在完成 Google Code Prettify 的設定後,
只要在顯示程式碼的地方把 class 加上 Google Code Prettify 的 class,如:
<pre class="codeblock prettyprint">
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
</pre>

顯示的結果便會像這樣,是不是很不錯呢?
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

關鍵字:程式碼, 顯示, 網頁, 文章, 內嵌, 嵌入, 放入, 部落格, blog, blogger, css,
參考資料:


更多精選推薦文章