SimplicityでSyntaxHighlighter Evolveの挙動を修正する【WordPress】【Simplicity】【SyntaxHighlighter Evolve】

こんにちは、たくじろう(@takujiro_0529)です。

今回は、このブログでも利用さていただいている、Wordpressの無料テーマ『Simplicty』でシンタックスハイライトを簡単に記事に挿入することができるプラグイン『SyntaxHighlighter Evolve』を使った時に起きるバグを解決できたので、その方法を紹介します。

スポンサーリンク




『SyntaxHighlighter Evolve』の表示バグ

実際に起きた表示のバグは下記の画像です…

書いてないspanタグなどが表示されていて、非常に読みにくい状態になってしまいました。

ちなみにうまく表示されている状態が下記の画像です。

表示内容が全く違います。

Simplicityのシンタックスハイライトの機能追加

Simplicityはver2.1.6からプラグインなしでソースコードをハイライト表示できるよう機能追加をしました。

公式サイト「Simplicityでソースコードをハイライト表示する方法」

私はプログラマーとしてソースコードを記事に載せるために、プラグインの『SyntaxHighlighter Evolve』を利用していました。

そこで、Simplicityのバージョンアップ内容を把握しないまま更新して、しばらく経って『SyntaxHighlighter Evolve』を使っている記事でソースコードの表示がおかしくなっていることに気がつきました。

スポンサーリンク

解決方法

私は始め、このバグは『SyntaxHighlighter Evolve』側に問題があると考えていて、プラグインのアップデートや再インストールなどを試みましたが全くもって表示内容がなおってくれませんでした。

しょうがなく、『SyntaxHighlighter Evolve』の代わりになるようなプラグインを探していた時に、Simplicityのハイライト機能の存在を知りました。

そこでSimplicityのハイライト機能を利用しようと思い、公式サイトを参考にしていたところ、すでに私のブログでは設定済みでした。

そこでふと、『ハイライト機能の競合』を疑いました。
これが正解で、『Simplicityのハイライト機能』と『SyntaxHighlighter Evolve』が競合しているのが問題で表示がおかしくなっていました。

なので、今回は『Simplicityのハイライト機能』を停止して修正することにしました。

以下、設定の解除方法です。

ブログのカスタマイズからソースコードを選択

ソースコードのハイライト表示のチェックを外す

まとめ

かなり時間がかかってしまいましたが、これで一旦解決できました。

あまりこのバグに遭遇している方がいらっしゃらないのか、検索してもなかなか情報収集できませんでした。

ただ、競合して…みたいな記事はいくつかあったので、それでふと競合を疑うことができたのかもしれません。

それにしても、技術ブログなのに情けない記事が大量生産されていて、このブログに見に来てくださったプログラマの方には大変迷惑をおかけしました。すいません…orz

今後とも、よろしくお願いいたします。

byたくじろう(@takujiro_0529)

スポンサーリンク

スポンサーリンク



シェアする

  • このエントリーをはてなブックマークに追加

フォローする