用 google-code-prettify 在網頁中嵌入代碼 - 部落格
By Donna
at 2011-08-07T09:44
at 2011-08-07T09:44
Table of Contents
最近要把網誌加入顯示程式代碼的功能，
原本想要使用 SyntaxHighlighter，
不過在找資料的過程中發現了 google-code-prettify
最後改採用 google-code-prettify 作為網頁顯示程式碼的外掛
看了一下版上文章跟精華區都沒有 google-code-prettify 的介紹
這邊跟大家分享一下自己的使用方式
網誌版：http://goo.gl/UWL1r
簡單來說就是
1. 上網下載 google-code-prettify 的檔案，連結在
http://code.google.com/p/google-code-prettify/
並放在免費空間（我放在 Dropbox）
2. 在網誌的範本中加入下面紅色標出的部分
要把連結裡的 my.url.to 替換成自己放 prettify 檔案的空間
<head>
<-- 中略 -->
<-- 1. 在 /head 標籤前加入下面兩行 -->
<link href="http://my.url.to/prettify.css" rel="stylesheet" type="text/css"/>
<script src="http://my.url.to/prettify.js" type="text/javascript">
</head>
<-- 2. 在 body 標籤內加入 onload 設定 -->
<body onload='prettyPrint()'>
</body>
3. 要使用時請把代碼用 pre 標籤包住，並加上 class="prettyprint"
<pre class="prettyprint">
// 這裡放程式代碼
std::iostream << "Hello World";
</pre>
--
[程式設計雜筆]
“編程少Code，安用之？” －－ 史記．晉世家：30
http://coder.aqualuna.me
--
原本想要使用 SyntaxHighlighter，
不過在找資料的過程中發現了 google-code-prettify
最後改採用 google-code-prettify 作為網頁顯示程式碼的外掛
看了一下版上文章跟精華區都沒有 google-code-prettify 的介紹
這邊跟大家分享一下自己的使用方式
網誌版：http://goo.gl/UWL1r
簡單來說就是
1. 上網下載 google-code-prettify 的檔案，連結在
http://code.google.com/p/google-code-prettify/
並放在免費空間（我放在 Dropbox）
2. 在網誌的範本中加入下面紅色標出的部分
要把連結裡的 my.url.to 替換成自己放 prettify 檔案的空間
<head>
<-- 中略 -->
<-- 1. 在 /head 標籤前加入下面兩行 -->
<link href="http://my.url.to/prettify.css" rel="stylesheet" type="text/css"/>
<script src="http://my.url.to/prettify.js" type="text/javascript">
</head>
<-- 2. 在 body 標籤內加入 onload 設定 -->
<body onload='prettyPrint()'>
</body>
3. 要使用時請把代碼用 pre 標籤包住，並加上 class="prettyprint"
<pre class="prettyprint">
// 這裡放程式代碼
std::iostream << "Hello World";
</pre>
--
[程式設計雜筆]
“編程少Code，安用之？” －－ 史記．晉世家：30
http://coder.aqualuna.me
--
Tags:
部落格
All Comments
Related Posts
Google Authorship
By Necoo
at 2011-08-06T11:19
at 2011-08-06T11:19
部落格的標題如何修改
By Xanthe
at 2011-08-06T06:55
at 2011-08-06T06:55
與微博同步更新問題
By Rosalind
at 2011-08-06T01:17
at 2011-08-06T01:17
上傳相片真的不方便
By Hedwig
at 2011-08-05T10:53
at 2011-08-05T10:53
連線已重設?! 總之就是開不開!
By Selena
at 2011-08-05T09:12
at 2011-08-05T09:12