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も概ね使いこなせてきたかと思います。
あとは細かいスタイルの調節が必要かもしれませんね。
後ほど、ノウハウが溜まってきたらご紹介しようと思います。
最後までお読み頂きありがとうございます。
0 件のコメント:
コメントを投稿