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


相關文章

這個網誌中的熱門文章

【全聯PX Pay】儲值/首刷/銀行卡友日攻略+常見問題Q&A!

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

【所得稅繳納攻略】2019信用卡刷卡/分期活動+拆單教學!

【綜合所得稅攻略】2019所得稅有感降稅!重點變更+教學!

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

【超商懶人包】消費享10%回饋攻略+繳費取貨也能賺回饋?

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

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

【永豐銀行】想辦大戶被卡?永豐既有帳戶結清銷戶流程!

【玉山卡所得稅攻略】玉山Pi卡一次繳清獨享1%P幣回饋!