2013年2月12日 星期二

提高文章內程式碼易讀性

blogsopt 後台撰寫文章的編輯器可以識別程式碼,不過如下圖一樣並不會自動上色,因此這裡簡單的利用 google-code-prettify 來幫文章裡所提到的程式碼上色,用以提高程式碼的識別與可讀性。因為必須更動小部分的語法,所以別忘了先備份 template


進入 blogspot 後台,點選「範本」>>「編輯 html」;
  1. 打開 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>
  2. 找到<body>的標籤,把 onload='prettyPrint();' 放到標籤內部如下。
    <body onload='prettyPrint();'>
  3. 接下來,複製一段程式碼貼到編輯器裡頭,應該大部分都可以看到效果。如果不行的話,只要像這樣編輯HTML<pre class="prettyprint" >程式碼</pre>,把程式碼包起來就可以顯示效果。



沒有留言:

張貼留言