Board logo

標題: Google Code Prettify - 輕量級的語法上色工具 [打印本頁]
作者: wmh    時間: 2009-12-21 23:11     標題: Google Code Prettify - 輕量級的語法上色工具

Google Code Prettify (Javascript code prettifier)
http://code.google.com/p/google-code-prettify/
輕量級的語法上色工具

這是一套由 Google 所推出並且大量運用於 Google Code 網站的輕量級的語法上色工具，如果您曾經用過 Google 的 API，對於本篇文章的程式碼色彩必定不陌生，因為這是同一套程式所產生的。

用法也相當簡單，下載解壓縮後，引用他的 CSS 和 JavaScript：
[jsg.example]
<pre class="prettyprint">
&lt;link href="prettify.css" type="text/css" rel="stylesheet" />
&lt;script type="text/javascript" src="prettify.js">&lt;/script></pre>
[/jsg.example]

把要上色的程式碼用 class="prettyprint" 的 div 標籤包起來：
[jsg.example]
<pre class="prettyprint">
&lt;pre class="prettyprint">
你的 code 放這邊!
&lt;/pre>
</pre>
[/jsg.example]

最後在 body 標籤內加上  onload="prettyPrint()" 即可！
[jsg.example]
<pre class="prettyprint">
&lt;body onload="prettyPrint()">
</pre>
[/jsg.example]

Google Code Prettify 的使用方式就是這麼簡單，會自動判斷要上色的關鍵字，支援多種語言如 C 語言家族、Java、Python、Bash、SQL、HTML、XML、CSS、Javascript、Makefiles 等，對於 Perl、Ruby、PHP、VB、Awk 也部份支援。底下是一些其他範例：

[jsg.example]
<style type="text/css">
pre.prettyprint {
  border: 1px solid #BBB;
  background-color: #FAFAFA;
}
</style>
<link href="http://jsgears.googlecode.com/svn/trunk/prettify.min/prettify.css" type="text/css" rel="stylesheet" />

這是 Google Maps API 的第一個範例：
<pre class="prettyprint">
&lt;!DOCTYPE html &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
  &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;/&gt;
    &lt;title&gt;Google Maps JavaScript API Example&lt;/title&gt;
    &lt;script src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&amp;sensor=true_or_false&quot;
            type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById(&quot;map_canvas&quot;));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload=&quot;initialize()&quot; onunload=&quot;GUnload()&quot;&gt;
    &lt;div id=&quot;map_canvas&quot; style=&quot;width: 500px; height: 300px&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

C++
<pre class="prettyprint">
#include &lt;iostream&gt;
using namespace std;

int main ()
{
  cout &lt;&lt; "Hello World!";
  return 0;
}
</pre>

Java
<pre class="prettyprint">
public class HelloWorld {

  public static void main (String[] args) {
     System.out.println("Hello, world!\n");
  }

}
</pre>

<script type="text/javascript" src="http://jsgears.googlecode.com/svn/trunk/prettify.min/prettify.js"></script>
<script type="text/javascript">
var oldonload = window.onload;
if (typeof window.onload != 'function') {
  window.onload = prettyPrint;
}
else {
  window.onload = function() {
    oldonload();
    prettyPrint();
  }
}
</script>
[/jsg.example]
作者: JS領事    時間: 2009-12-24 21:50

這也太神奇了吧= =



歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)