返回列表 發帖

Google Code Prettify - 輕量級的語法上色工具

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

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

用法也相當簡單,下載解壓縮後,引用他的 CSS 和 JavaScript:
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>


把要上色的程式碼用 class="prettyprint" 的 div 標籤包起來:
<pre class="prettyprint">
你的 code 放這邊!
</pre>


最後在 body 標籤內加上  onload="prettyPrint()" 即可!
<body onload="prettyPrint()">


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

這是 Google Maps API 的第一個範例:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
            type="text/javascript"></script>
    <script type="text/javascript">
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
 
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>
C++
#include <iostream>
using namespace std;

int main ()
{
  cout << "Hello World!";
  return 0;
}
Java
public class HelloWorld {

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

}
To infinity and beyond!

這也太神奇了吧= =
I.WON'T.DIE

TOP

返回列表 回復 發帖