google-code-prettifyを導入しました

Program

グーグル特製のコードハイライター
google-code-prettify -


syntax highlighting of code snippets in a web page - Google Project Hosting
を導入してみました。

以下導入記録。

導入方法

まずは
google-code-prettify -


syntax highlighting of code snippets in a web page - Google Project Hosting
から
ファイルのダウンロードです。ダウンロードしたzipの中身のjsファイルとcssファイルを、適当な所にアップロードします。cssの方は今あるcssファイルに追記でも可。僕はめんどうなのでそうしました。その後、HTMLの修正。まずヘッダーに

<script type="text/javascript" src="(パス)/prettify.js"></script>
<link rel="stylesheet" href="(パス)/prettify.css" type="text/css"/>

具体的には、このサイトの場合(cssのリンクは追記したためなし)

<script type="text/javascript" src="http://blog.wcrawl.com/script/prettify.js"></script>

このようになります。次にJavaScriptのロードです。

<body onload="prettyPrint()">

これで準備は完了。

あとは、ソースコードを

<pre class="prettyprint">&lt;pre class="prettyprint"></pre>

で囲めばOK。

cssを書き変えれば、色やなんかが変更できそうなので、今度やってみよう。

余談ですが、人のHTMLのソースを覗き見していると、結構使っている人いますね。

実行例

<pre class="prettyprint">
public class TestPrettyPrint {
  private String testString;

  public TestPrettyPrint(String testString){
    this.testString = testString;
  }

  public static void main(String[] argv) {
    TestPrettPrint test = new TestPrettyPrint("Herro world!");
    test.printString();
  }

  public void printString() {
    System.out.println(testString + "google-code-prettify test");
  }
}
</pre>