SyntaxHighlighter | カスタマイズ | 偶数行と奇数行の縞模様の背景色(stripes)を変更する

Tags:

SyntaxHighlighterは本来、偶数行と奇数行に異なる設定を行えるようになっているが、基本的にはすべての行の背景色が同じになっている。そこで、偶数行と奇数行にそれぞれ異なる背景色を設定する。

偶数行と奇数行の縞模様の背景色(stripes)を変更する

今回の例では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)に変更する。

ライブラリファイル自体を変更すると問題になる可能性があるため、次のようにCSSを別途作成して上書きする。

<style>
  .syntaxhighlighter .line.alt1 {
    background-color: #f0f0f0 !important;
  }
</style>

変更前と変更後は次のように表示される。

  • 変更前

SyntaxHighlighter Java

  • 変更後

SyntaxHighlighter Stripes

コードを実行

テーマ自体が変更されるため、同じページ内に表示されるソースコードには同じ設定が適用される。