JavaScript/jQuery/beautyOfCode
改造版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