SyntaxHighlighterの表示が崩れてしまった場合

多くの方が利用されているでしょうWordpressプラグイン「WP SyntaxHighlighter」ですが、テーマを変えた途端表示が崩れてしまいました。

こちらのプラグインは<pre class=”brush: c; gutter: true; first-line: 1; highlight: []; html-script: false”></pre>で囲まれた内容を言語ごとのキーワードをハイライトしてくれるものです。

さて、テーマを変えた途端崩れてしまったと書きましたが、具体的には意図しない箇所で改行されるようになってしまったのです。

テーマを変える前は通常表示されていたこと、このプラグインは<pre>タグを使うことから現テーマのCSSからpreを総洗いしてチェックしましたが…改善されず。

仕方なくFireBugを使って実際に表示されているHTMLコードを解析してみました。

「WP SyntaxHighlighter」はjsを利用して本文中の<pre class=”brush: c; gutter: true; first-line: 1; highlight: []; html-script: false”></pre>で囲まれた内容を<table>関連タグと<code>タグで再構成していることが分かりました。要するに、正常表示されていたcssと異常表示される今回のcssから<table>と<code>について調べればいいのです。

調べていくと…有りました。原因は<code>中の「display:block」でした。検索していただくと分かりますが、「display:block」はインライン要素をブロック構造に置換する指定になります。つまり異常例では「void」と「main(void)」がそれぞれのブロックとして認識され、意図しない構成になっていたのです。
ではcss中のcode要素に対して「display:inline」とすればいいかというと、「WP SyntaxHighlighter」によるハイライトは正常になりますが、これまで表示してきたcode要素が崩れることになります。
そんな時に指定するのが良い所取りの「display:inline-block」です。これはブロック構成を取りながら内部はインライン要素を維持するので今回のトラブルにはうってつけです。

ともあれ、今回の表示崩れは

code{
    display:inline-block;
}

で無事解決となりました。同じような現象でお悩みの方は参考にしてみてください。