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

コードを見やすく表現するJavaScript「beautyOfCode」

｜ ｜ ｜ ｜ ｜ ｜ ｜

htmlやJavaScriptをサイトで書いているときに見やすくしたいという欲求があると思います。
jQueryプラグインのbeautyOfCodeはコードを見やすくする、いわゆるシンタックスハイライトです。

使用方法
beautyOfCodeからファイルをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.beautyOfCode.js"></script>
<script type="text/javascript">
$.beautyOfCode.init({
theme: 'Django',
//対応テーマ一覧http://alexgorbatchev.com/pub/sh/2.1.364/styles/
brushes: ['JScript', 'Plain'], //対応させたい言語

//対応言語一覧http://alexgorbatchev.com/pub/sh/2.1.364/scripts/
ready: function() {
$.beautyOfCode.beautifyAll();
}
});
</script>

上記を記述したら、以下のようにコードを書いていきます。
<pre class="code">
<code class="html">
//classにはコードの種類
//boc-collapseを追加すると、閉じた状態にしておけます。
ここにコード
</code>
</pre>

コードを見やすく表現するJavaScript「beautyOfCode」サンプル

記事作成：2009年12月18日

前の記事：面白法人カヤックのアプリ勉強会に行ってみたよ
次の記事：雪が舞い散るJavaScript「Snowfall」