SyntaxHighlighter: How to Set Alternate Row Colors

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

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

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

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

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

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

shCoreDefault.css

228 229 230 231 232 233 234 235 236

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

設定変更例

228 229 230 231 232 233 234 235 236

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

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

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

shCoreDefault.css

237 238 239

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

設定変更例

237 238 239

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

 

References

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