ワードプレスのコードハイライトプラグインで半角スペースが消える
ワードプレスには様々なプラグインがあります。
プラグイン拡張性の高さがワードプレスのメリットです。
ただ、たまに不可思議な動作をすることもあります。
本ブログでは、ＨＴＭＬやＰＨＰ等のコードを「コードハイライト」プラグインを使用して表示しています。
ですが、半角スペースが消えて表示される現象が発生していました。
色々調べて対処しましたので、備忘録として記録いたします。
今回の現象
コードハイライトプラグインとして、「Urvanov Syntax Highlighter」（Crayon Syntax Highlighterの後継プラグイン）を使用していましたが、以下のように半角スペースが消える現象がでていました。
色分けされているので、読むことはできますがコピーペーストすると半角スペースのない状態でペーストされます。
とりあえず試してみたこと
とりあえずプラグイン無効にしてみたところ、コードの半角スペースが表示されました。
明らかに「Urvanov Syntax Highlighter」プラグインが原因であることは間違いないようです。
原因を調べましたが具体的に特定はできず
原因を調べてググってみましたが、主に以下の要因が出てきました。
- ワードプレステーマとの競合による現象
- プラグイン自体の不具合
ググってまず出てきたのは、他のプラグインとの競合による要因です。
事例では、Cocoonというワードプレステーマを使用すると半角スペースが消える現象が発生するとのことでした。
ですが、本ブログはCocoonを使用していません。
もしかしたらテーマが競合している可能性もありますが、いろいろカスタマイズしている関係上、確認のためにテーマ変更するのは怖いです。
また使用しているプラグイン「Urvanov Syntax Highlighter」は「Crayon Syntax Highlighter」の後継です。Crayon Syntax Highlighterが更新されなくなり、不具合が出たため、別の方がリメイクした経緯を持ちます。
そのため、一部不具合のある可能性もあります。
ですが、調べるためにはなかなかの時間を要するため、現段階では調べ切れていません。
ただ、Urvanov Syntax Highlighterを停止させると現象が改善するため、プラグイン内で何か要因があると思われます。
別のプラグインを使用して解決
コードハイライターは、ソースコードを見やすくするものですが、半角スペースが消えては見にくくなります。
というわけで、別のコードハイライトプラグインをインストールしました。
結果半角スペースもちゃんと表示され、問題は解決しました。
ちなみに新たにインストールしたプラグインは「Syntax-highlighting Code Block 」というプラグインです。
ソースコード系のブログ記事は、コピーできないとめんどくさい
今回なぜ、半角スペースが表示されないことにこだわったかというと、記事を見られる方の利便性を考えてのことです。
自分も他の方の記事を見て、問題を解決することがよくあります。
その際に、動作するかどうかをサンプルコードをコピーして試します。
うまく動作したら、中身を解析し、再コーディングしています。
もしコピーペーストできない記事だと、とても面倒に感じます。
自分がそうならば、本部ログを見られる方も同じだと思いました。
アクセシビリティを考えることは大事なことです。
web制作者は「作って満足」ではなく「使われて満足」を目指さなくてはいけません。
ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
関連記事
