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

這個網誌中的熱門文章

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

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

【台北中壢】國道客運/公車路線(1818,2022,9001,9025)!

【Hami Video】影劇/電視/運動館免費體驗/試用序號分享(隨時更新)!

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