改造版jQuery.beautyOfCode.js

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

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

使い方

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

	$.beautyOfCode.beautifyAll();

});
/]]>/
}}
をの手前に入れて、シンタックスハイライトさせたいコードは、
#sh(html)
pre class="code" data-brush="php">

	<strong style="font-weight: normal"><?= str_replace("\n", "<br/>", $var) ?></strong>

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

使用可能なパラメーター

通常は、タグか、

タグの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