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







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


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


    相關文章

    這個網誌中的熱門文章

    【玉山U Bear卡】2019必辦神卡!網購5%超商8%電影20%!

    【地價稅繳納攻略】2019/108年度信用卡回饋/分期整理!

    【玉山卡攻略】神卡雲集,依序辦卡拿新舊戶首刷最佳解!

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

    【全家FamiPay】消費繳費綁新光寰宇10%、玉山U Bear8%!

    【永豐大戶DAWHO】現金回饋信用卡國內2%國外3%最高8%!

    【台新街口聯名卡】繳費6%消費6%~8%!隨機返現最高100%!

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

    【聯邦+LINE一卡通2%】不必自己算!繳費條碼產生器上線!

    【果粉必看】iPhone 11/Pro/Pro Max 刷卡回饋/分期攻略!