Wednesday, June 22, 2011

日誌改造1 - Google Code Prettify

上次說過要在blog加入code block的程式碼式樣, 可以用作記錄日誌改造過程, 在這我使用的是Google Code Prettify, 其他的還有 SyntaxHighlighter, Chili, SHJS, Highlight.js, Lighter.js, JSHE, 等等. 因GCP如像比較簡單, 加上google的大名, 所以選了它. 實作如下:

1.在<head>...</head>之間加入以下code.
<!--  for code prettify -->
<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>



2.在<body ... >加入onload="prettyPrint()",如下:
<body onload="prettyPrint()">

3.在要貼上的碼段前後用<pre class="prettyprint">...</pre> 或 <code class="prettyprint">...</code>就完成. 如程式碼太短, GCP可能無法正確判斷程式碼是那種語言, 可在class加入如lang-js,lang-c等class直接指定. 如下:

<code class="prettyprint lang-c">
int i,j;
j=0;
for (i=0; i<10; i++){
  j+=i;
}
printf("%d",j);
</code>

大功告成.

No comments:

Post a Comment