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