投稿を書くとき、linuxの端末での操作の説明やファイルの記述方法を書くのにWordPressプラグイン「SyntacHighlighter Evolved」が便利ですね。さっそくインストールして有効化、スキンとか設定して利用しだしたのですが、どうも上手く表示してくれなかったりしたのをググって対処した備忘録です。
こんなに優秀なプラグインなのに、ちょっとした不具合で使えないと残念な気分になってた方の助けになれば幸いです。この投稿を書いた時のSyntaxHighlighter Evolvedのバージョンは 3.1.10 です。
【2014/12/27 追記】
現在私は、SyntaxHighlighter Evolvedの利用はやめています。詳しくはコチラをご覧ください。
crayon syntax highlighterに乗り換えて、SyntaxHighlighter Evolvedは利用停止する
このページの目次
行番号と本文が微妙にずれて表示される。
なぜか左の行番号と本文の行がずれています。（下図）
一行のものです。番号が左上で、記述がやけに下に表示されています。
複数行でもずれています、とても残念な気分です。
対応方法
WordPressインストールフォルダ/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.cssを開き 「vertical-align: baseline !important;」の行をコメントアウトする
/* vertical-align: baseline !important;*/
これで直りました！
参考にさせていただいたサイト
SyntaxHighlighter Evolvedをバージョンアップしたら行番号がズレた
http://sawara.me/unclassified/1327/
追記
テーマをtwentythirteenからtwentyfourteenに変更したら、行のズレがまたもや復活してしまいました。ググって、別の対処方法も実施しました。
子テーマのstyle.cssに以下を追記
/* syntaxhighlihterのズレ防止 */
.syntaxhighlighter .container:before, .syntaxhighlighter .container:after {
display: block;
}参考にさせていただいたサイト
syntaxhighlighterの行スタイルがずれる件
複数行のハイライト表示ができない
ショートコードパラメータで複数行をハイライトさせたい場合、highlight=”2-5″ というふうに複数行を指定できるみたいですが、なぜか複数行をハイライトしてくれません。
対応方法
上記例のように2から5行目までをハイライトさせるには
highlight=”2,3-5″
これだと複数行表示されます。
highlight=”2,3,4,5″
これでいいじゃんと思うかもしれませんが、指定する行数が多い場合は少し記述が短くてすみますね。
preタグやbrタグが勝手にくっ付いてしまったり、勝手に書き換えられてしまう。
なぜかSyntaxHighlighterのショートコードを入れると、preタグが付いてしまいました。
ひとつや二つなら気にならないかもしれませんが、複数ショートコードを入れた投稿など目も当てられない状況になってしまいます。
ちょっと、これは見るに堪えません。
さらに、”<”や”>”の記号が勝手に書き換えられたり、ｂｒの改行コードが表示されていたりとおかしなことになっていました。一生懸命ショートコード書き込んで、よーし上手いこと書けたと思っていたら、あとで見返したら表示が無茶苦茶で全然参考にならない投稿になってたら気分も落ち込みます。
せっせとちゃんと表示されるように直しても、さらに誤字を見つけて修正して更新したくなっても、またおかしくなるんじゃないかと、このショートコード入れた投稿を更新するのにも気が引けるようになってしまいました。
対処方法
どうやら、プラグイン「TinyMCE Advanced」が原因のようでした。定番プラグインということで入れていましたが、私の場合は、たぶんTinyMCE Advancedをほとんど使っていない（正確には「使いこなせていない。」）ため、サクッと無効化して以来、SyntaxHighlighterを使ってる投稿も安心して更新できるようになりました。