在網頁中嵌入顯示程式碼：全系列效果比較及教學整理

在網頁嵌入程式碼這系列不知不覺也寫了不少，
如果都只看單篇的話很難比較出每種顯示的效果有何不同，
因此這一篇就是要在不同的設定中使用同一段程式碼，
直接讓大家看看效果的差異，也方便大家選用！

圖片來源：http://www.css-school.ru/s-build/2306-glavnaya-prostye-html-zagotovki-dlya-stranic.html

在網頁中嵌入顯示程式碼：HighLight 軟體
使用 HighLight 的好處是可以產生類似各 IDE 的顏色組合，
像下面的配色是不是讓我們想起了 eclipse 呢？

 1 public class HelloWorld {
 2 
 3     public static void main (String[] args) {
 4         System.out.println("Hello, world!");
 5     }
 6 }

在網頁中嵌入顯示程式碼：CSS Block
相當簡潔的顯示方式，適合只有一兩行或一小段程式、設定檔使用。

public class HelloWorld {

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

在網頁中嵌入顯示程式碼：Google Code Prettify
透過這個也可以為程式碼上色，且不用像 HighLight 一樣要手動轉換。

public class HelloWorld {

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

在網頁中嵌入顯示程式碼：CSS Block + Google Code Prettify
把 CSS Block 和 Google 上色結合起來效果似乎也很不錯，
而且設定超簡單，幾乎不用額外設定！教學請見連結文章的最下面處！

public class HelloWorld {

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

在網頁中嵌入顯示程式碼：Pastie
直接在線上網站貼上程式碼，之後只要在文章中嵌入一段 script 即可，
對作者而言最簡單方便的方法，不過好像會有超出版面的可能。

以上就是我目前整理出來所有顯示程式碼的效果，
大家可以參考比較後選擇自己比較喜歡的，
然後再進到每一篇中去參考詳細的設定教學喔！

更多部落格外掛，請參考：
Blog Plugins：部落格外掛大全整理，什麼都有、什麼都不奇怪
其他總整理類型的文章請見：大全中的大全，文章總整理index

關鍵字：程式碼, 顯示, 網頁, 文章, 內嵌, 嵌入, 放入, 部落格, blog, blogger, css, 總整理, 推薦, 教學, 語法, 上色