syntaxhighlighter

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;
}

スポンサーリンク

関連記事一覧