SyntaxHighlighter: How to Set Alternate Row Colors

SyntaxHighlighter: 行の背景色を互い違いにする方法

SyntaxHighlighter 3.x では、shCoreDefault.css (※) の設定内容を変えれば奇数行と偶数行の背景色を変えることができる。

※ヘッダ部で shCoreDefault.css をインクルードしている場合。

タイトル行、奇数行、偶数行の背景色の変更

shCoreDefault.css の以下の部分を変えればよい。

タイトル行 => .syntaxhighlighter
偶数行     => .syntaxhighlighter .line.alt1
奇数行     => .syntaxhighlighter .line.alt2

.syntaxhighlighter {
  background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}

.syntaxhighlighter {
  background-color: #c9c9c9 !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: #efefef !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}

ハイライト行の背景色の変更

さらに、ハイライト行の背景色もカスタマイズしてみた。

.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}

.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #a9ffa9 !important;
}

 

References

http://ateitexe.com/wordpress/syntaxhighlighter-customize/