偶数行と奇数行で背景色を変える

広告

SyntaxHighlighterではもともと偶数行と奇数行で異なる設定が行えるようになっていますが、デフォルトではどちらの背景色も同じになっています。そこで偶数行と奇数行で異なる背景色を設定してみます。

今回は例としてDefaultテーマを使用します(他のテーマでも同じように設定できます)。「shCoreDefault.css」ファイル又は「shThemeDefault.css」ファイルをテキストエディタで開いて下さい。そして次のような記述があるところを探して下さい。

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

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

「.syntaxhighlighter .line.alt1」が偶数行に関する設定、「.syntaxhighlighter .line.alt2」が奇数行に関する設定です。現在はどちらの背景色も同じ「white」に設定されています。今回は偶数行の背景色を灰色(#f0f0f0)に変更してみます。

.syntaxhighlighter .line.alt1 {
  background-color: #f0f0f0 !important;
}

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

変更前と変更後で次のように表示されます。

[変更前]

p8-1

[変更後]

p8-2

テーマの変更となりますので、同じページで表示されるソースコードは同じ設定が適用されます。

( Written by Tatsuo Ikura+ )