skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

mootoolsでコードをシンタックスハイライトさせるJavaScript「Lighter.js」

｜ ｜ ｜ ｜ ｜ ｜ ｜

サイト上でhtmlやjsなどを紹介する時に、わかりやすく表示できると見る人もうれしいでしょう。
Lighter.jsはJavaScriptライブラリmootoolsを利用してシンタックスハイライトを可能にします。

使用方法
Lighter.jsからファイル一式をからmootools.jsをダウロードします。
<script src="mootools-1.2.1-core.js" type="text/javascript"></script>
<script src="Lighter.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$$('code').light({
indent: 2,
mode: 'ol',
path: 'Lighter/' //その他のファイルを格納しているディレクトリ
});
});
</script>
上記を記述後、以下のように記述すれば完成です。
<pre><code class="html"> //classにはjsやphpなど対応するものを入れて下さい。
コード
</code></pre>

mootoolsでコードをシンタックスハイライトさせるJavaScript「Lighter.js」サンプル

記事作成：2009年04月08日

前の記事：グラフにトレンドラインも加えたJavaScript「jqPlot」
次の記事：jQueryでRSSの登録をユーザーに促すJavaScript「jQuery Feed Menus」