在網頁中嵌入顯示程式碼:Google Code Prettify







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

在上一篇 在網頁中嵌入顯示程式碼:CSS Block 中,
我們介紹了如何使用 CSS 的效果來顯示程式碼區塊,
然而和這系列第一篇的 HighLight 軟體 效果比超來,
就少了將程式碼上色的功能,程式看起來比較不清楚。


這篇我們要介紹的是 Google Code Prettify
這是由 Google 所推出,且已大量運用於 Google Code 網站的輕量語法上色工具,
如果讀者曾經使用 Google API 開發程式,相信對他所產生的程式碼顏色一定很熟悉,
因為這此顏色都是同一套程式所產生的。
今天一樣透過他,我們就可以將文章中的程式碼語法上色,
且設定上也非常簡單,以下就是安裝步驟。

(2013.11.01更新)
先前的舊版程式碼需放在 html裡面,且需要呼叫 onload 影響網頁載入
現在建議放在HTML/JavaScript小工具裡比較方便管理,而且程式也變簡捷了!
以下這一行取代了先前的步驟一、二,接下來直接看步驟三即可~
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

舊版步驟一:在 blogger template 中的 <head> 和 </head> 間插入以下語法
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>

舊版步驟二:在 blogger template 中搜尋到 <body,並修改為:
<body onload='prettyPrint();'>

新舊版步驟三:在要顯示的程式碼用 pre 和 class='prettyprint' 包住,如下列方式:
<pre class="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!");
    }
}

上一篇的 CSS Block 也可以和這篇結合,在完成 CSS Block 設定後,
只要在顯示程式碼的地方把 class 加 CSS Block 的 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, 語法, 上色, 推薦, 教學
參考資料:


相關文章

這個網誌中的熱門文章

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

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

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

【永豐DAWHO攻略】申辦大戶帳戶/信用卡最佳申辦順序!

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

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

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

【全聯週三點數回饋日】首刷/卡友日/儲值金消費點數入帳!

【2020行事曆】109年人事行政局行事曆+連假請假攻略!

【玉山Only卡】神級紅利回饋!紅利倍多芬最高13倍=5.2%回饋無上限!