本ブログ「Linuxとは日記」は移転しました
Linuxとは日記の移転先はこちら

2010年08月17日

google-code-prettifyでブログにソースコードを表示

以前にもgoogle-code-prettifyでソースコード綺麗に表示する方法に関する記事を書いたことがあります。それからLinuxとは日記では、google-code-prettifyを活用してきましたが、気がつかないうちに、随分とバージョンアップを繰り返してさらに便利になっているようです。

筆者にとって特に嬉しい機能は、elispのハイライトにも対応したということです。elispとはemacs lispの略で、Emacsを拡張するために使う言語のことです。最近はEmacsに関する記事をたくさん書いていたのですが、ブログ上でelispをハイライト表示できるツールが無かったので、非常に嬉しい知らせです。

google-code-prettifyのインストール方法は次の手順で行うことができます。

まずは、google-code-prettifyのサイトから必要なファイルをダウンロードして展開します。テスト版ではない方をダウンロードしてください。

ダウンロードして展開したフォルダの中に、prettify.jsとprettify.cssというファイルがあるはずです。この二つがgoogle-code-prettifyを使うために最低限必要なファイルです。

それ以外のファイルは、ハイライトできる言語を拡張するための、プラグインです。筆者のようにelispのソースをハイライトしたい方は、lang-lisp.jsを、cssを追加したい方は、lang-css.jsもブログなどににアップロードしてください。

アップロードが完了したらHTML側で読み込ませる必要があります。それぞれのファイルへリンクして、bodyタグにはprettyPrint()という記述を追加する必要があります。

    <link href="http://what-linux.up.seesaa.net/css/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="http://what-linux.up.seesaa.net/js/prettify.js"></script>
    <script type="text/javascript" src="http://what-linux.up.seesaa.net/js/lang-lisp.js"></script>
</head>
<body onload="prettyPrint();">

これでインストールは完了です。実際に使用するときは、preタグのclassにprettyprintという文字列を入力します。さらに、手動で言語を指定したい場合は、prettyprintの後に、半角スペースを入力してlang-elというように記述します。

ちなみに、それぞれの言語にはlang-elのような文字列が決められているのですが、それらの文字列はREADMEと、各拡張ファイルに記述されています。

<pre class="prettyprint lang-el">
;;; これでelispとしてハイライトされます
</pre>
posted by Linuxとは at 01:42 | webアプリケーション | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。