JavaScript/jQuery/beautyOfCode


Total: 2146 / Today: 1 / Yesterday: 1

改造版jQuery.beautyOfCode.js

https://bitbucket.org/logue/beautyofcode-for-html5/

これは、Lars Corneliussen氏のbeautyOfCodeの改造版です。Syntax HighlighterのjQueryラッパーです。特徴は、data-属性を使うことと、data-brush属性の値から自動的に必要なレンダリングスクリプトを読み込むことです。わざわざ、<script>タグを増やす必要はありません!

使い方

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="../javascript/jquery.beautyOfCode.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
	$.beautyOfCode.beautifyAll();

を</body>の手前に入れて、シンタックスハイライトさせたいコードは、

<pre class="code" data-brush="php">
	<strong style="font-weight: normal"><?= str_replace("\n", "<br/>", $var) ?></strong>
</pre>

と入れるだけ。data-brush属性にハイライトさせたい言語を入れると、$.beautyOfCode.beautifyAll();が実行されたときに、自動的に必要なスクリプトとCSSを読み込みます。

使用可能なパラメーター

通常は、<code>タグか、<pre>タグのclass属性がcodeのタグに反応します。以下のパラメーターを入れることで動作をカスタマイズできます。なお、このdata-属性は、html5で定義されている独自データー属性で、XML互換です。

属性処理
data-brushハイライトさせたいコードの言語
data-class-name追記したいクラス名
data-first-line開始行番号
data-tab-sizeタブの大きさ(スペースいくつ分か?)
data-smart-tabsタブをスペースに変換する
data-ruler
data-gutter行番号を表示する
data-highlightハイライトさせたい行番号(コンマ区切り)
data-toolbarツールバーを表示する
data-collapse最小化した状態にする
data-auto-links自動リンクする
data-light
data-wrap-lines自動改行する
data-html-script

Last Modified: 2011-07-20 21:25:03