SyntaxHighlighter使い方メモ

tips

今更ながらSyntaxHighlighterを導入しました。

全記事に適用するのは中々しんどい作業でしたが、中々見やすくなったんじゃないでしょうか。

初めて使うので使い方とかオプションとかメモしておきます。

基本的な使い方

<pre>とか<script>タグにclass=”brush:hoge”を指定する。

hogeに指定する文字列（aliases）はここに書いてある。

当然対応するjsを読み込んでいない場合は使えない。

コンフィグとオプション

ここに一覧がある。

SyntaxHighlighter.configはこんな感じ。訳は適当なので全然違うかもね。

Name Value Description
bloggerMode false Bloggerを使ってる場合はtrueにしないとダメ。
strings Object SyntaxHighlighterの右上に出てくる項目の文字列を変更できる。どんな要素があるかはここを参照。
stripBrs false Blogなどの機能で勝手に挿入された<br />を無視する。
tagName "pre" 別のタグを指定できる。

オプション（SyntaxHighlighter.defaults）はこんな感じ。

Name Value Description
auto-links true URLがあったら自動でリンクさせる。（デモ）
class-name ” 自分でカスタマイズしたCSSのクラスを指定する。（デモ）
collapse false コードを折りたたんでおける。（デモ）
first-line 1 表示上の開始行数を変更する。（デモ）
gutter true 行数の表示を切り替える。（デモ）
highlight null [1, 2, 3]といった形で行数を指定することで背景を強調することができる。（デモ）
html-script false HTML内に書かれたScriptも色付きで表示する。（デモ）
smart-tabs true タブ文字の幅を切り替える。trueだと2タブで、falseだと4タブ？（デモ）
tab-size 4 タブ文字の幅を調節する。（デモ）
toolbar true ツールバーの表示有無を切り替える。（デモ）

まとめ

この辺とかこの辺を見るとまだまだ色んなことが出来そうなんだけど、とりあえず公式ドキュメントに書いてあるものだけ。