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







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


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

    這個網誌中的熱門文章

    2018年5月繳106年度綜合所得稅信用卡優惠整理!

    最新106年度綜合所得稅計算教學!教你看懂稅率級距表/免稅額/扣除額!今年新增基本生活費不課稅也更新囉~

    綜合所得稅節稅攻略:列舉扣除額保險費篇!

    證件遺失補辦身分證/健保卡/駕照/行照/信用卡總整理

    國泰Koko combo icash網購/超商/icash/繳費5%!

    綜合所得稅節稅攻略:列舉扣除額房貸房租篇!

    2018最新博客來100,50,25折價券序號e-coupon分享

    7-11/全家/萊爾富刷信用卡/icash繳費賺回饋攻略!

    繳納2018/107年度房屋稅信用卡回饋/分期整理!

    繳納2018/107年度牌照稅信用卡回饋/分期整理!