SyntaxHighlighterのデフォルト値変更 Ver 3.0

SyntaxHighlighterの使い方も概ね調べ終わりました。 Ardor(@ArdorOnline)です。 SyntaxHighlighterのデフォルト値を一括して変更する方法もありましたので、簡単にご紹介します。

SyntaxHighlighter.defaultsについて

以前の記事でオプションを紹介しました。
今回は、ご紹介したオプションのデフォルト値を変更する方法です。
config設定と同様に共通で反映させることができます。 用意されているオプションは、次の通りです。

プロパティ	デフォルト値	意味
auto-links	true	URLをリンク表示するかどうか。
class-name	""	適用スタイルクラス名。
collapse	false	ソースコードを折りたたみ表示するかどうか。
first-line	1	開始行番号。
gutter	true	行番号の表示設定。
highlight	null	特定行を強調表示。
html-script	false	htmlをハイライト表示する。
smart-tabs	true	スマートタブ機能のオンとオフを切り替えることができます。
tab-size	4	タブのサイズ。
toolbar	true	ツールバーのオンとオフを切り替えることができます。

defaultsの変更方法について

defaultsの変更方法は、プロパティ名で配列にアクセスして、値を変更します。
具体的には、次のようなコードを書きます。

SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['class-name'] = "code-style";
SyntaxHighlighter.defaults['collapse'] = false;
SyntaxHighlighter.defaults['first-line'] = 1;
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['highlight'] = 2;
SyntaxHighlighter.defaults['html-script'] = false;
SyntaxHighlighter.defaults['smart-tabs'] = false;
SyntaxHighlighter.defaults['tab-size'] = 2;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();

このように、SyntaxHighlighter.defaults["プロパティ名"]で設定を変更します。
設定が完了したらSyntaxHighlighter.all();で実行してください。
もちろん前回の記事でご紹介したconfigも一緒に変更できますよ。

最後に

いかがでしたでしょうか？
SyntaxHighlighterも概ね使いこなせてきたかと思います。
あとは細かいスタイルの調節が必要かもしれませんね。
後ほど、ノウハウが溜まってきたらご紹介しようと思います。

最後までお読み頂きありがとうございます。

• 
• ツイート

RSSリーダーで購読する

公式アカウントで更新情報をチェック！

@asterlistさんをフォロー

筆者のつぶやきはこちら

@ArdorOnlineさんをフォロー