2010年9月4日 星期六

【Blogger】Blogger code block

在blogger中放置程式碼區塊,範例如下
if (true) {
    //程式碼
}
做法
<link href="http://koinvul.myweb.hinet.net/prettify.css" type="text/css"
 rel="stylesheet" />
<script type="text/javascript" src="http://koinvul.myweb.hinet.net/prettify.js">
</script>
在 template 的<html></html>中加入述程式碼。
※注意,程式碼css與js檔空間是使用我的hinet空間,如果我有任何改動就會讓標籤失去效果,所以我會建議你到src屬性標記的網址,把檔案下載下來,在放到你個人的穩當空間中,不要盜連本教學的空間

然後將 template 的<body>加入 onload="prettyPrint()" 這個屬性。
<pre class="prettyprint">...</pre>
之後只要把程式碼放入上述標籤即可,你還可以在 template 的 css 區塊中加入
.post pre {...}
即可在其中編輯這個 block 的 css 樣式。

另外,block 無法判斷 Tab 鍵的樣子,你要正確呈現 tab 的縮排需要 space*4。

補充2 於 2010/11/12
當內容需要表現大於、小於符號時,為了讓 html 可以正確解析,必須使用替代字元;
<的替代字元為 &lt分號 、>為 &gt分號 ,分號是這個 ;符號 。

補充3 於 2011/08/17
個人空間載入速度過慢,所以已改連 google 線上的檔案。
<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>

5/12/2016
google code 停止 support 了,ref CDN
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.css

官方:google-code-prettify
參考資料:遲鈍雨人bboytaiwan

2 則留言:

  1. If you're indenting with tabs, you probably need to set the tab size to 4: tab-size:4 in the CSS. – Dave Jan 27 '14 at 7:24

    回覆刪除