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







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


在網頁中嵌入顯示程式碼: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, 總整理, 推薦, 教學, 語法, 上色

    這個網誌中的熱門文章

    【銀行代碼查詢】3碼銀行代碼列表、7碼分行代碼查詢

    【博客來折價券】25/50/100/150現領現折+天天簽到換200+OP兩倍換!

    【博客來折價券】博客來免費序號e-coupon分享(持續更新)

    【新光卡攻略】台灣Pay單筆888送50+寰宇3%,LINE會員繳費10%!

    【Hami Video】免費Hami Video體驗/試用序號分享(隨時更新)!

    Gmail 無限分身術:產生無限 email 帳號