• SyntaxHighlighter の Diff (差分) の色分けスタイルを見慣れたものに変更する

    目次

    概要

    ソースコードを強調表示する SyntaxHighlighterDiff (差分) を強調表示すると、次のように色分け表示される。

    SyntaxHighlighter の差分表示 (Diff)

    このような配色が普段使用している差分ツールと異なるので気になる、という人も結構いると思う。たとえば私の環境では削除された行が赤追加された行が緑というスタイルの差分表示を見ることが多い。

    そこで SyntaxHighlighter の Diff (差分) の色分けスタイルを見慣れたものに変更する方法を紹介する。

    ※ ちなみにこの方法は SyntaxHighlighter EvolvedSyntax 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 ということか。

    Post Tagged with ,

コメントを残す

メールアドレスが公開されることはありません。