SyntaxHighlighter2.0の使い方 SyntaxHighlighter2.0
SyntaxHighlighter2の使用方法をご紹介しています。
SyntaxHighlighter2はHTMLやJavaScriptなどの言語をソース表示するJavaScriptライブラリです。
なお、ここでご紹介しているSyntaxHighlighterは、旧バージョンであるSyntaxHighlighter 1.5.1とは多少設定が異なりますのでご注意いください。
- ※ 本家サイトは閉鎖されました。
- ※ ブログやCMSでの使用方法は掲載していません。
ダウンロードと設置
Githubからダウンロードして解凍します。
解凍後、scripts、src、stylesディレクトリを任意の場所に設置します。
JavaScriptおよびCSSの読み込みと設定
次の要素をhead要素内に記述します。
パスは環境により変更してください。
HTML
なお、ソース表示に対応している言語は以下の通りです。
※ 表示させたい言語に合わせて、読み込むjsを記述してください。
| 言語 | 設定値 | ファイル名 |
|---|---|---|
| Bash/shell | bash, shell | shBrushBash.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
適用方法
次のJavaScriptコードを記述します。
JavaScript
class属性に設定項目と値を入力します。
複数設定する場合は、;（セミコロン）で区切って入力していきます。
HTML
classの設定データ
| 名前 | 設定値 | 説明 |
|---|---|---|
| auto-links | true、false | httpなどのURLがあった場合にリンクを自動的に設置するかどうかの設定です。初期値はtrueです。 |
| brush | html... | ソース表示させる言語を設定します。 |
| class-name | 任意 | クラスの名前を設定します。初期値は''です。 |
| collapse | true、false | ソースを一時的に非表示にしてリンクを設定、リンクをクリックするとソースが表示される設定です。初期値はfalseです。 |
| font-size | % | 文字の大きさを設定します。初期値は100%です。 |
| first-line | 行番号 | 行番号の開始数を設定します。初期値は1です。 |
| gutter | true、false | 行番号の表示・非表示の設定です。初期値はfalseです。 |
| highlight | 行番号 | 指定行をハイライト状態にします。複数行ハイライトにする場合は、[1,3]などカンマで区切り設定します。初期値はnullです。 |
| html-script | ture、false | HTMLとして出力するかどうかの設定です。初期値はfalseです。 |
| light | true、false | 行番号やツールバーなどを非表示にしてシンプルにする設定です。初期値はfalseです。 |
| ruler | true、false | ルーラーを表示・非表示の設定です。初期値はfalseです。 |
| smart-tabs | true、false | タブの整列処理をするかどうかの設定です。初期値はtureです。 |
| tab-size | 数字 | 1タブあたりのスペース個数の設定です。初期値は4です。 |
| toolbar | on、off | 右上の表示されているツールバーの表示・非表示の設定です。 |
詳細設定
SyntaxHighlighterの詳細設定です。
SyntaxHighlighter.config後にそれぞれの設定名を追記して値を入力します。
HTML
| 設定名 | 設定値 | 説明 |
|---|---|---|
| bloggerMode | true、false | ブログのモードにするかを設定します。初期値はfalseです。 |
| clipboardSwf | swfのアドレス、null | クリップボードへコピーするツールバーの表示設定です。初期値はnullです。 |
| strings.viewSource | ツールバーにあるソース表示アイコンのツールヒントテキストです。初期値はview sourceです。 | |
| strings.copyToClipboard | ツールバーにあるソースコピーアイコンのツールヒントテキストです。初期値はcopy to clipboardです。 | |
| strings.print | ツールバーにあるソース印刷アイコンのツールヒントテキストです。初期値はprintです。 | |
| strings.help | ツールバーにあるヘルプアイコンのツールヒントテキストです。初期値は?です。 | |
| toolbarItemWidth | 数値 | ツールバーの横幅の設定です。初期値は16です。 |
| toolbarItemHeight | 数値 | ツールバーの縦幅の設定です。初期値は16です。 |
| tagName | タグ | ソース表示させるタグの設定です。初期値はpreです。 |
テーマ
SyntaxHighlighterには、いくつかテーマが用意されています。
テーマを変更したい場合は、以下のhref属性を変更したいテーマのCSSに設定してください。
HTML
| shThemeDefault.css | shThemeDjango.css | shThemeEmacs.css |
| shThemeFadeToGrey.css | shThemeMidnight.css | shThemeRDark.css |
自動改行（折り返し）のアイコン非表示
ソース表示される部分の横幅よりソースが長いと、自動改行されアイコンが表示されます。
このアイコンを非表示にする場合は以下のCSSを追加します。
（追加場所はSyntaxHighlighterのCSSより後であれば問題ありません。）
CSS