サンプルコードを見やすくハイライトする「google-code-prettify」を使ってみた


ソースコードを紹介するとき<pre>タグを使用し シンタックスハイライトで見やすくしているサイトが多数あります

いろんなjsやプラグインがあり このブログを書いているWordpressにも シンタックスハイライトプラグインがいろいろあります

その1つ「google-code-prettify」を紹介

google-code-prettifyの使い方

google-code-prettifyのファイルを利用する場合

「http://code.google.com/p/google-code-prettify/」からファイルをダウンロード

prettify_01

「Download」をクリック

prettify_02

赤枠からファイルをダウンロードします
今回は「prettify-small-21-Jul-2010.zip」をダウンロードしました
※左側の↓矢印のボタンをクリックしても ファイルをダウンロードできます

ダウンロードしたzipファイルをデスクトップに解凍

prettify_03

使うのは「prettify.css」と「prettify.js」の2つです(他のjsは何に使うのだろうか?)

2つのファイルをサーバにアップロードし 読み込みます


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

※ご自分の環境に合わせてソースを変えてください

body要素でprettyPrint関数を呼び出す


<body onload="prettyPrint()">

ハイライトさせたいソースコードの書かれたpre要素にclass属性「prettyprint」を追加する


<pre class="prettyprint">
...
ソースコード
...
</pre>

これでソースコードが色分けされ 見やすくなります


「Google Code Prettify for wordpress」のファイルを利用する場合

「Google Code Prettify for wordpress」からファイルをダウンロードする

prettify_04

「Download」をクリックしてファイルをダウンロードする
ダウンロードしたzipファイルをデスクトップに解凍

prettify_05

「google-code-prettifyの使い方」と同様に 「google_code_prettify」フォルダ内の「prettify.css」と「prettify.js」をサーバにアップロードし
ファイルを読み込み・prettyPrint関数を呼び出し・pre要素にprettyprintクラスを追加してください


jQueryを使ってさらに簡単に「google-code-prettify」を利用する

「prettify.css」と「prettify.js」をサーバにアップロードするところまでは一緒です

「prettyPrint()」の呼び出しと「class=”prettyprint”」の追加を jQueryに任せてみましょう


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(function(){
    $('pre').addClass('prettyprint');
    prettyPrint();
  });
</script>

こんな感じで pre要素にクラス属性「prettyprint」を追加し prettyPrint()を実行させています

これなら あとから「google-code-prettify」を追加したときでも「class=”prettyprint”」を追記する手間がありません


「Google Libraries API」を使ってもっと手軽に高速に

僕の場合 jsのライブラリやGoogleマップ Ajaxなどを利用するときは「Google Libraries API」を使っています
Ajaxでスクリプトを読み込むので ページ表示速度を気にされる方は利用してみるといいかもしれません

スクリプトの読み込み


<script type="text/javascript" src="http://www.google.com/jsapi/"></script>
<script type="text/javascript" src="/libs/ajax-loader.js"></script>

「Google Libraries API」を利用するときは まず「http://www.google.com/jsapi」を読み込みます
その後 ライブラリの読み込みます

ajax-loader.js


google.load("jquery","1");

google.setOnLoadCallback(function(){

  $('pre').addClass('prettyprint');
  prettyPrint();

}); //google.setOnLoadCallback

「Google Libraries API」を使うと 複数のライブラリを一箇所にまとめることができます
さらに ライブラリのバージョンアップにも自動的に対応してくれてかなり便利です


google.load("jquery","1");
google.load("jqueryui","1");
google.load("maps", "3", {"other_params":"sensor=false"});
google.load("swfobject", "2");
google.load("feeds", "1");
google.load('gdata', '2.x', {packages: ['analytics']});
google.load('visualization', '1', {'packages':['table']});

google.setOnLoadCallback(function(){

  $('pre').addClass('prettyprint');
  prettyPrint();

}); //google.setOnLoadCallback


こんな感じで使うと便利です

詳しい使い方は「Google Libraries API – Developer’s Guide」を参考にしてください

あっjQueryの最新バージョン1.6になってる
https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js」を読み込むと
自動的に最新バージョンのファイルを読み込んでくれます

感謝感謝です

参考サイト

google-code-prettify + jQuery でソースコードをハイライトする