syntaxhighlighterの行スタイルがずれる件


wordpressで大人気のsyntaxhighlighterですが、このblogのfirefoxだと何故か微妙に行番号と実際のコードの位置がずれていました。

直したのでメモ。

調べてみると、twitter社が提供しているbootstrap CSSを使っているwordpressのテーマだと起こるみたいです。このblogのtheme Sparklingはbootstrapを使用していました。

理由はsyntaxhighlihterの埋め込むhtmlで使用している”container“というクラスが、bootstrapのクラスと衝突してしまうからです。

とりあえず、衝突した部分を無効にするためのスタイルをwordpressのAppearance -> Editor -> style.css に追記。

/* syntaxhighlihter adjustment */
.syntaxhighlighter .container:before, .syntaxhighlighter .container:after {
    display: block;
}

これできちんと表示されるようになりました。