SyntaxHighlighter の Diff (差分) の色分けスタイルを見慣れたものに変更する
目次
- 概要
- 差分スタイル (CSS) のカスタマイズ
- 参考：主な差分ツールの色分けスタイル
- 参考：差分項目に対応する CSS クラス
- コラム：shCoreDefault.css などの shCore***.css ファイル
- 参考リンク
概要
ソースコードを強調表示する SyntaxHighlighter で Diff (差分) を強調表示すると、次のように色分け表示される。
このような配色が普段使用している差分ツールと異なるので気になる、という人も結構いると思う。たとえば私の環境では削除された行が赤で追加された行が緑というスタイルの差分表示を見ることが多い。
そこで SyntaxHighlighter の Diff (差分) の色分けスタイルを見慣れたものに変更する方法を紹介する。
※ ちなみにこの方法は SyntaxHighlighter Evolved や Syntax Highlighter for WordPress といった SyntaxHighlighter 系のプラグインにも有効。
差分スタイル (CSS) のカスタマイズ
SyntaxHighlighter の差分表示 (Diff) の配色を変更する場合は、次のような CSS コードをコアまたはテーマの CSS ファイルに記述する。
.syntaxhighlighter code.diff.color2 { /* file */
background-color: #ffff99 !important;
color: #990000 !important;
}
.syntaxhighlighter code.diff.variable { /* range */
color: #ff0000 !important;
}
.syntaxhighlighter code.diff.color1 { /* unchanged */
color: black !important;
}
.syntaxhighlighter code.diff.comments { /* deletion */
background-color: #ff9999 !important;
color: black !important;
}
.syntaxhighlighter code.diff.string { /* addition */
background-color: #99ff99 !important;
color: black !important;
}
※ テーマに関係なく適用する場合はコアスタイル (shCore.css) を、特定のテーマのみに適用する場合はテーマスタイル (shThemeDefault.css, shThemeEclipse.css など) を編集する。
CSS の変更が反映されると Diff (差分) は次のように表示される。
--- before.txt Mon Jan 01 01:23:45 2010 +++ after.txt Sat Sep 15 12:48:29 2011 @@ -1,3 +1,3 @@ This line is unchanged. - This line is removed. + This line is added. This line is also unchanged.
※ そのほかの色分けスタイルにしたい場合は color, background-color プロパティで指定されるカラーコードを適宜書き換える。(参考：主な差分ツールの色分けスタイル)
参考：主な差分ツールの色分けスタイル
主な差分ツール (または差分機能を持つツール) の色分けスタイルを表にまとめてみた。
| 差分ツール (差分機能) | 削除行 (単語) | 追加行 (単語) |
|---|---|---|
| Trac (Pygments) | #ffdddd (#ee9999) | #ddffdd (#99ee99) |
| Google Code | #ffd8d8 (#ff8888) | #ddf8cc (#99ff99) |
| TortoiseUDiff (TortoiseSVN) | #ff8080 | #80ff80 |
| TortoiseMerge (TortoiseSVN) | #ffc864 (#c86464) | Yellow (#ffff96) |
| WinMerge |
#efcb05 (#f1e2ad) 選択時は #ef7774 (#ffa0a0) |
|
| Eclipse | #f7f7f7 (#d8d8d8) | |
参考：差分項目に対応する CSS クラス
SyntaxHighlighter では差分項目とそれに対応する CSS クラス名は次のような関係になっている。
| 差分項目 | フォーマット | 対応するクラス名 |
|---|---|---|
| 変更前後のファイル | --- and +++ |
color2 |
| 変更箇所の範囲 | @@ -R +R @@ |
variable |
| 変更されていない行 | (space) |
color1 |
| 追加された行 | + |
string |
| 削除された行 | - |
comments |
コラム：shCoreDefault.css などの shCore***.css ファイル
SyntaxHighlighter 公式サイトの Installation では少なくともコアスタイル (shCore.css) と利用するテーマスタイル (shThemeEclipse.css, shThemeEmacs.css など) を読み込む
ように説明されている。
つまりデフォルトテーマを使用する場合は shCore.css と shThemeDefault.css を読み込み、
<link href="css/shCore.css" rel="stylesheet" type="text/css" /> <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
Eclipse テーマを使用する場合は shCore.css とshThemeEclipse.css を読み込むことになる。
<link href="css/shCore.css" rel="stylesheet" type="text/css" /> <link href="css/shThemeEclipse.css" rel="stylesheet" type="text/css" />
ここで SyntaxHighlighter に含まれている CSS ファイルを確認すると、ほかにも shCoreDefault.css, shCoreEclipse.css といったファイルがあることに気付く。ファイル名で検索してみても (公式サイトにも) なかなか情報が見つからないが、中身を見るとコアスタイルとテーマスタイルを結合させたものになっている。ここから推測するに、コアスタイルとテーマスタイルの両方を読み込む代わりに、この shCore***.css ファイル一つのみを読み込めば OK ということか。