（ちょっとメモ）SyntaxHighlighter 3.0.83 の使い方
最終更新日：2017年11月17日 （初回投稿日：2013年11月26日）
SyntaxHighlighter（シンタックス ハイライター）は、
<pre>要素のソースコードを、分かりやすく色分け表示してくます。
このブログにも使ってみたので、忘れないうちに使い方をメモっておきます。
本サイトは Prism（プリズム）に乗り換えました。
Prism の使い方は、
（ちょっとメモ）Prism の使い方（SyntaxHighlighterから乗り換えた）
をご覧ください。
● 2017年11月：Prismへの切替のため、本記事のソースコードを SyntaxHighlighter 3.0.83 での表示から画像に変更しました。本サイトでは SyntaxHighlighter の使用をやめますが、本記事は削除せずにこのまま保存します。
- SyntaxHighlighter をダウンロードする
- 必要なファイルをチョイスしてサーバにあげる
★JavaScriptファイルの 対応言語一覧
★CSSファイルの shCore と shTheme の違い - HTMLファイルに必要なファイルを読み込む
★基本の読み込ませ方
★オートローダーを使う - pre要素への基本的な指定（class属性でキーワードを指定する）
★言語のキーワード一覧 - オプション機能を使う
★特定の行をハイライトする
★タイトルをつける
★他言語のソースコードとHTMLを同時に
★開始行番号を変える
★行番号を表示させない
★ソースコードをたたんでおき、クリックで表示させる
★ツールバーの表示・非表示
★ソース内のリンクをはずす - CSSを編集してオリジナルのスタイルにする
★セレクタは「pre」でなく「.syntaxhighlighter」
★オールド IE 用のセレクタは「コア」部分の「.ie」
★オリジナルの「クラス名」を設定することもできます
SyntaxHighlighter をダウンロードする
バージョンは何年も前から変わっていないようです。
＊このページで現在ダウンロードできなくなっており、Github からダウンロードできるようですが、それも2年前のファイルです。（2017年11月記）
＊ちなみに、WordPressのプラグインは「SyntaxHighlighter Evolved」です。
使い方を「超初心者のサーバ移転とドメイン移管」のほうにアップしています。
興味のある方はこちらもご覧ください。
SyntaxHighlighter の必要なファイルをチョイス
ダウンロードしたモノを解凍すると、下図のようになっています。
実際に使用するファイルは、
「scripts」の中の JavaScriptファイル。
「styles」の中の CSSファイル。
この2つのフォルダを、サーバにごっそりアップしてもいいし、
必要なファイルだけピックアップしてもOK。
JavaScriptファイルについて（対応言語一覧）
このうち shCore.js は必須です。
コレ以外の「shBrush...」とついているものから、必要な対応言語のものをチョイス。
例えば、CSS と JavaScript、HTML をブラッシュアップしたいなら、
「shBrushCss.js」「shBrushJScript.js」「shBrushXml.js」を選びます。
ファイルの対応言語は以下のとおり。
| 対応言語 | 「scripts」内のファイル名 | 対応言語 | 「scripts」内のファイル名 |
|---|---|---|---|
| アップルスクリプト | shBrushAppleScript.js | JavaScript | shBrushJScript.js |
| ActionScript3 | shBrushAS3.js | Perl | shBrushPerl.js |
| Bash/shell | shBrushBash.js | PHP | shBrushPhp.js |
| ColdFusion | shBrushColdFusion.js | プレーンテキスト | shBrushPlain.js |
| C++ | shBrushCpp.js | PowerShell | shBrushPowerShell.js |
| C# | shBrushCSharp.js | Python | shBrushPython.js |
| CSS | shBrushCss.js | Ruby | shBrushRuby.js |
| Delphi | shBrushDelphi.js | SASS SCSS | shBrushSass.js |
| Diff | shBrushDiff.js | Scala | shBrushScala.js |
| Erlang | shBrushErlang.js | SQL | shBrushSql.js |
| Groovy | shBrushGroovy.js | Visual Basic | shBrushVb.js |
| shBrushJava.js | Java | XML, HTML, XHTML, XSLT |
shBrushXml.js |
| shBrushJavaFX.js | JavaFX | ||
CSSファイルについて（shCore と shTheme の違い）
「shCore.css」は「コア」スタイルで、設定の初期化等を担っています。
「shTheme○○○.css」という名前のCSSファイルは「テーマ」別の装飾の指定です。
なので「shCore.css」と「shTheme○○○.css」は一緒に使います。
「shCore○○○.css」というネーミングのCSSファイルは、
「コア」と「テーマ」の内容を合体させたモノなので、1つだけ読み込めばOK。
（例えば「shCore.css」と「shThemeDjango.css」を読み込んでも、
「shCoreDjango.css」だけを読み込んでも、同じプレビューになります。）
ダウンロードファイルの中の「index.html」は簡単なデモ。
スタイルは「shCoreDefault.css」になっています。ここで CSSをいろいろ変更して、好みのものを選びます。CSSは編集もできます。
2つばかり、プレビューを紹介。
上は「shCoreDjango.css」。このように黒バックのものが多いようです。
下は「shCoreEclipse.css」。
SyntaxHighlighter の必要なファイルをHTMLに読み込む
SyntaxHighlighter の読み込み（基本）
下記のように、shCore.js（必須）と、そのほかのチョイスしたJavaScript ファイル全部と、お好きなスタイルのCSSファイルを読み込みます。相対URLでも絶対URLでもOK。
最後の「<script>SyntaxHighlighter.all();</script>」（7行目）を書くのを忘れずに。
SyntaxHighlighter のオートローダーを使う
たくさんの言語に対応させたい場合、オートローダー（shAutoloader.js）を使うほうが、ロードが速いそうです。
この場合「scripts」フォルダの中身を丸ごと全部サーバにアップしたほうが合理的。
で、<head>部分には下記のように、shCore.js と shAutoloader.js を読み込み、
あとは好きなスタイルのCSSを読み込ませます。相対URLでも絶対URLでもOK。
そして、そのページに必要なスクリプトを、<body>内に書きますが、
コレは </body>の直前（body 要素の1番最後）に書くのがミソ。
Autoloader は、使用する箇所が全て読み込まれないと言語を判別できないため、一番最後に。
最後（29行目）の「SyntaxHighlighter.all();」も忘れずに！
下のソースでは全部の言語を入れていますが、実際はもちろん使うものだけを書きます。
ここでも、相対URL、絶対URLのどちらでもOK。
SyntaxHighlighter の基本的な指定
ココまでの準備ができたら、あとは<pre>に class属性で「class="brush:言語のキーワード"」を書くだけ。
例えば HTML、CSS、JavaScript、PHP なら、それぞれ下記のように指定します。
SyntaxHighlighter の「言語のキーワード」はこちら。
| 対応言語 | キーワード 複数あるものは、どれか1つをチョイス |
「scripts」内のファイル名 |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.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 |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
SyntaxHighlighter のオプションを使う
★特定の行をハイライトする
★タイトルをつける
★他言語のソースコードとHTMLを同時に
HTML以外の言語を指定してから、半角スペースを空けて「html-script:true」と書けば、
両方とも色分けされます。（下記は、JavaScript と HTMLの例）
★開始行番号を変える
★ツールバーの表示・非表示
「toolbar」とは、<pre>の右上に出てくる小さな「？」マーク。これを非表示にできます。
★ソース内のリンクをはずす
ソース内にURLがあると、デフォルトでリンクを貼りますが、「auto-links:false」にすれば、ソース内のリンクをはずせます。
CSSを編集してオリジナルのスタイルに
セレクタは「pre」でなく「.syntaxhighlighter」
<pre>要素に「class="brush:○○"」と指定すると、スタイルのセレクタが「.syntaxhighlighter」になります。
オリジナルのスタイルにするには、読み込んだCSSを開いて「.syntaxhighlighter」の部分を編集します。
コアとテーマの合体版（shCore○○○.css）なら228行目あたりから、
テーマ（shTheme○○○.css）なら冒頭の17行目あたりからです。
セレクタと、それが何を指定するものなのかピックアップしてみました↓
- .syntaxhighlighter
- これ↑が全体を囲むモノ（<pre>要素にあたるものと思ってOK）
・「width:auto」にしとけば親の幅が変わっても領域内に収まります。
・あとは padding、background、borderなどの指定を適宜に。角丸の指定もココ - .syntaxhighlighter .line.alt1
- 偶数行（偶数行か奇数行のどっちかの背景色を変えると、行が読みやすくなります）
- .syntaxhighlighter .line.alt2
- 奇数行（偶数行か奇数行のどっちかの背景色を変えると、行が読みやすくなります）
- .syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2 - 各行のハイライト時（背景色や文字色を変えて目立たせます）
- .syntaxhighlighter table caption
- title属性でつけたタイトル（キャプション）
- .syntaxhighlighter .gutter
- 行番号部分
・背景色や文字色などを指定します。 - .syntaxhighlighter .gutter .line
- 行番号部分のライン
「border-right: 2px solid #ddd」などと「border-right」で右側の線のスタイル・色などを指定。borderは右以外にも効くけど、みっともないから右だけにしといたほうが無難。 - .syntaxhighlighter .gutter .line.highlighted
- 行番号部分のハイライト時（背景色や文字色を変えて目立たせます）
- .syntaxhighlighter .toolbar
- toolbar（右上の「?」）のスタイル
文字色・背景色、border、marginなどを編集します。
SyntaxHighlighterのCSSは、値の最後に!important（優先順位をあげる記述）が必ず付いています。コレは無くても動作しましたが、何か不具合があったら困るので、そのまま付けておきました。
＊!importantについては、こちら↓に詳細を書いています。
【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）
SyntaxHighlighter のスタイル上の構造
SyntaxHighlighter はブラウザに出力さると、HTMLコードは<pre>のままですが、スタイル指定では下記のように div と table の組み合わせになるよう設計されています。
全体がクラス名「SyntaxHighlighter」という<div>要素、その中に<table>要素があって、2つの<td>要素がそれぞれ「gutter」「code」というクラスに分けられています。
それぞれの中の1行ずつが<div>で囲まれているのもわかります。
これ↑はブラウザのWeb開発ツールを使うと見れます。
Web開発ツールについては、
（ちょっとメモ）Web開発ツールでCSSがどう効いているか確認しよう
をご覧ください。
オールド IE 用のセレクタは「コア」部分の「.ie」
IE9以下の設定は別にするようになっています。
コアの155行目アタリにある「.syntaxhighlighter.ie」というセレクタ部分を編集します。
IEで見ると、文字サイズや paddingが反映されない なんて場合はココをチェック。
オリジナルの「クラス名」を設定することもできます
セレクタを「.syntaxhighlighter」でなく、オリジナルのCSSクラス名に切り替えることもできます。
自分で設定したいクラス名を「class-name: 'クラス名'」で設定します。
<head>で、オリジナルのCSSファイルは、syntaxhighlighter のCSSより後に読み込ませることが重要です。
- 関連記事
-
- （ちょっとメモ）Googleフォームで簡単・無料でフォームが作れる！
- （ちょっとメモ）Prism の使い方（SyntaxHighlighterから乗り換えた）
- （ちょっとメモ）FC2ブログで「最終更新日時」が使えるようになった！
- （ちょっとメモ）さようなら〜IE8♪
- （ちょっとメモ）FC2ブログに「カテゴリ別一覧」を作る
- （ちょっとメモ）FC2ブログに はてブ と Google+1 のボタンをつける
- （ちょっとメモ）FC2ブログで OGP設定（Facebook, Twitter Cardsも）
- （ちょっとメモ）StatCounter でブラウザのシェアを調べる
- （ちょっとメモ）FC2ブログで PC用テンプレートをスマホで適用させる
- （ちょっとメモ）WordPressプラグイン SyntaxHighlighter Evolved
- （ちょっとメモ）SyntaxHighlighter 3.0.83 の使い方
- （ちょっとメモ）HTML5情報サイト「HTML5.jp」
- （ちょっとメモ）IEにもCSS3の機能を使えるようにする「CSS3 PIE」
- （ちょっとメモ）ブラウザのCSS3とHTML5への対応サイト
- （ちょっとメモ）トラッキングクッキーの無効化
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
SyntaxHighlighter のオートローダーを使う
ありがとうございます。
Re: SyntaxHighlighter のオートローダーを使う
こちらこそ！コメントありがとうございます。
ありがとう
とても分かりやすかったです。
ありがとうございます。
SyntaxHighlighterの利用
参考にさせていただきます。ありがとうございました。
Re: ありがとう
お役に立ててなによりです。こちらこそコメントありがとうございます！
Re: SyntaxHighlighterの利用
コメントありがとうございます！お役に立ててよかったです♪
