読者です 読者をやめる 読者になる 読者になる

趣味プログラマによるOSS開発日誌

趣味で作っているOSSソフトウェアの紹介や関連技術の紹介、楽曲製作、Webデザイン勉強状況を紹介します。

google-code-prettifyの導入

ホームページに掲載するソースコードを見やすくするために、Googleで公開されている「google-code-prettify」を導入した。
導入の仕方は、以下の通り。

  1. http://code.google.com/p/google-code-prettify/」からダウンロード
  2. ダウンロードしたファイルを展開
  3. 「distrib」以下にあるフォルダ「google-code-prettify」をサーバにコピー
  4. 適用するHTMLファイルheadタグに以下を追加

    <link rel="stylesheet" type="text/css" href="google-code-prettify/prettify.css">
    <script type="text/javascript" src="google-code-prettify/prettify.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	prettyPrint();
    });
    </script>
    


  5. ハイライトしたいソースコードを囲んだpreに、クラス「prettyprint」を指定

    <pre class="prettyprint">
    int num;
    </pre>
    


これでとりあえず専用の処理を書かずに、ソースコードをきれいに表示させることができるようになった。