syntaxhigh3

WordPressプラグイン「SyntaxHighlighter Evolved」で番号と行がずれて表示されたり、複数行のハイライト表示ができない場合の対処方法

2014/10/23[公開]

 投稿を書くとき、linuxの端末での操作の説明やファイルの記述方法を書くのにWordPressプラグイン「SyntacHighlighter Evolved」が便利ですね。さっそくインストールして有効化、スキンとか設定して利用しだしたのですが、どうも上手く表示してくれなかったりしたのをググって対処した備忘録です。

 こんなに優秀なプラグインなのに、ちょっとした不具合で使えないと残念な気分になってた方の助けになれば幸いです。この投稿を書いた時のSyntaxHighlighter Evolvedのバージョンは 3.1.10 です。

【2014/12/27 追記】

 現在私は、SyntaxHighlighter Evolvedの利用はやめています。詳しくはコチラをご覧ください。

crayon syntax highlighterに乗り換えて、SyntaxHighlighter Evolvedは利用停止する

行番号と本文が微妙にずれて表示される。

 なぜか左の行番号と本文の行がずれています。(下図)

syntax1

 一行のものです。番号が左上で、記述がやけに下に表示されています。

syntax2

 複数行でもずれています、とても残念な気分です。

対応方法

 WordPressインストールフォルダ/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.cssを開き 「vertical-align: baseline !important;」の行をコメントアウトする

  これで直りました!

 参考にさせていただいたサイト

SyntaxHighlighter Evolvedをバージョンアップしたら行番号がズレた

http://sawara.me/unclassified/1327/

追記

 テーマをtwentythirteenからtwentyfourteenに変更したら、行のズレがまたもや復活してしまいました。ググって、別の対処方法も実施しました。

 子テーマのstyle.cssに以下を追記

 参考にさせていただいたサイト

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

http://www.tejitak.com/blog/?p=499

複数行のハイライト表示ができない

 ショートコードパラメータで複数行をハイライトさせたい場合、highlight=”2-5″ というふうに複数行を指定できるみたいですが、なぜか複数行をハイライトしてくれません。

対応方法

 上記例のように2から5行目までをハイライトさせるには

highlight=”2,3-5″

 これだと複数行表示されます。

highlight=”2,3,4,5″

 これでいいじゃんと思うかもしれませんが、指定する行数が多い場合は少し記述が短くてすみますね。

preタグやbrタグが勝手にくっ付いてしまったり、勝手に書き換えられてしまう。

 なぜかSyntaxHighlighterのショートコードを入れると、preタグが付いてしまいました。

psauto1

 ひとつや二つなら気にならないかもしれませんが、複数ショートコードを入れた投稿など目も当てられない状況になってしまいます。

psauto2

 ちょっと、これは見るに堪えません。

 さらに、”<”や”>”の記号が勝手に書き換えられたり、brの改行コードが表示されていたりとおかしなことになっていました。一生懸命ショートコード書き込んで、よーし上手いこと書けたと思っていたら、あとで見返したら表示が無茶苦茶で全然参考にならない投稿になってたら気分も落ち込みます。

 せっせとちゃんと表示されるように直しても、さらに誤字を見つけて修正して更新したくなっても、またおかしくなるんじゃないかと、このショートコード入れた投稿を更新するのにも気が引けるようになってしまいました。

対処方法

 どうやら、プラグイン「TinyMCE Advanced」が原因のようでした。定番プラグインということで入れていましたが、私の場合は、たぶんTinyMCE Advancedをほとんど使っていない(正確には「使いこなせていない。」)ため、サクッと無効化して以来、SyntaxHighlighterを使ってる投稿も安心して更新できるようになりました。

こちらの記事もどうぞ

「WordPressプラグイン「SyntaxHighlighter Evolved」で番号と行がずれて表示されたり、複数行のハイライト表示ができない場合の対処方法」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です