コードを見やすく表現する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>

サンプル

	  
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
		<script type="text/javascript" src="Scripts/jquery.beautyOfCode.js"></script>

		<script type="text/javascript">
			$.beautyOfCode.init({
					theme: 'Django',
				brushes: ['Xml', 'JScript', 'CSharp', 'Plain', 'Php'],
				ready: function() {
					$.beautyOfCode.beautifyAll();
					$("#someCode").beautifyCode('javascript', {gutter:false});
				}
			});
		</script>

		
			<pre id="someCode">
				<code class="boc-highlight[2,4]">
					// my code
					var x = "Hello, world!";
					function juppi() {
						juppi(); // kill
					}
				</code>
			</pre>

Javascriptサンプルページ一覧

skuare.net