前の記事 ≪：入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆Ja...
次の記事 ≫：第18回 AjaxうきうきWatchが公開-Apollo参戦でWidget開発者の争奪戦が激化

C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」

2007年03月26日-はてなブックマーク

スポンサード リンク
google-code-prettify - Google Code
A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.

C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」。
具体的な対応言語は、Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, Ruby, PHP, Awk, Perl のようです。

Cのコードの場合、次のようにハイライトすることができます。色はCSSによって変えられます。



実装は、まずJavaScriptとCSSファイルを読み込み

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

そして window.onload イベントや、<body onload="〜">なんかでページが読まれた際に「prettyPrint();」関数を呼び出す設定を行います。

window.onload = function() {
    prettyPrint();
}

ハイライトしたいコード部分は、「<pre class="prettyprint"> </pre>」タグで囲います。
次はPHPコードの例( PHPの開始タグはエスケープしてます )

<h1>PHP</h1>
<pre class="prettyprint" id="php">
&lt;?php
for ($i=0;$i<100;$i++) {
 echo "HOGEHOGE";
}
?&gt;
</pre>

単純に色分けだけをしたい場合になかなか使えそうですね。

関連エントリ

関連の記事検索：JavaScript, CSS, ライブラリ, google, HTML, プログラミング
スポンサード リンク

By.KJ : 2007年03月26日 12:05 ブックマークに追加する livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)