2012年8月21日 星期二

在 blogger 中加入 google-code-prettify

寫 Blog 文章若需要貼出程式碼,最常使用到的就是程式高亮顯示(highlight)工具。
在這裡介紹在blogger中加入我使用的 google-code-prettify 讓程式碼產生高亮效果。

1. 首先進入我的網誌 【範本(template)】→【修改HTML】

2. 出現警告畫面,只建議熟析HTML的人編輯,亂改可能會影響blogger的正常功能。按【繼續】,直接編輯HTML。

3. 找到</head>的位置,將引用google-code-prettify的javascript和css檔的語法加入


<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>
4. 然後在onload事件加入prettyPrint();;不過我是直接在最下面加入<script>prettyPrint();</script>



<script>prettyprint();</script>

用 pre 包的 class 裡面可以加入 lang-html、lang-cs...之類的樣式,以符合自己貼的程式碼樣式!
  The lang-* class specifies the language file extensions.
  File extensions supported by default include
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".

沒有留言:

張貼留言