Syntax Highlighterの背景色と行間を変更する

wordpress

技術系ブログでよくみかけるプログラムコードを表現しているプラグイン「Syntax Highlighter」ですが、背景色が1行ずつ交互に色が変わっているのをよくみかけます。
Syntax Highlighterの背景色はデフォルトでは、白一色ですが、背景色を1行ずつ交互に変更する方法を解説します。当ブログでも使用しているプラグインです。備忘録として設定を残しておきます。これから導入を検討の方はぜひ参考にして下さい。

[スポンサーリンク]

この章でやること

Syntax Highlighterの背景色を変更します。

修正するファイル

cssを修正します。cssは「/XXX/wp-content/plugins/syntax-highlighter/3.X.XX/css」にあります。
テーマ(エディタ)の種類によって修正するファイルが変わってきます。
テーマを「eclipse」に設定している場合は、「shThemeEclipse.css」を修正します。
wp_sh

修正する箇所

background-colorを修正して、Syntax Highlighterの背景色を変更します。
line-heightを追加して、Syntax Highlighterの行間を変更します。
「line.highlighted.alt1」は強調文字の色です。

.syntaxhighlighter .line.alt1 {
  background-color: #ffffff !important;
  line-height:3.0em !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: #f0f0f0 !important;
  line-height:3.0em !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #f9ba5d !important;
}

上記の指定で、このように変わります。
wp_sh2

syntax-highlighterプラグイン

プラグインはこちらからダウンロードできます。
syntax-highlighter