syntaxhighlighter 覚書
ソースコードを表示するPLUGIN
ソースコードを表示させるプラグインに syntaxhighlighter というものがあって、使ってるんだけど。特定の行に色を付けたくなること多し。
その場合には、[php highlight=”行番号・・”] で指定する。
でもさ、いちいち数えるの面倒なんだよ。いまのところ対策は見つかっていない。ないのかな?
で、そのハイライトの色なんかもカスタマイズしたかったりするので、探してみた。
指定行のハイライト
2行目をハイライト行にする。複数行(2と5行目)をハイライトにする場合、カンマで区切る。
色のカスタマイズ
ターゲット:/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css枠で囲む
.syntaxhighlighter {
background-color: white !important;
border:1px solid #ccc;
}
奇数1行の色
.syntaxhighlighter .line.alt2 {
background-color: #f8f8f8 !important;
}
ハイライトの色変更
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
background-color: #FBFE85 !important;
}
行番号の色変更
.syntaxhighlighter .gutter .line {
border-right: 3px solid #DBD00B !important;
}
.syntaxhighlighter .gutter .line.highlighted {
background-color: #DBD00B !important;
color: white !important;
}
スポンサーリンク
