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>，把程式碼包起來就可以顯示效果。



沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)