【Cocoon】SyntaxHighlighterの表示不具合の対処法

【Cocoon】SyntaxHighlighterの表示不具合の対処法ブログ運営
ブログ運営

この前「Cocoon」の設定をいじってたら、ソースコードを表示する「SyntaxHighlighter」の表示がおかしくなってしまった事件の記録です。表示がおかしくなった原因対処法を忘備録として記します。

現在ではこの記事を投稿した時と環境が異なっている(SyntaxHighlighter→cocoon標準搭載のhighlight.jsに変えました)のでご注意ください。

この記事に書いてあること
  • ブログの当時の執筆環境(ソースコード周り)
  • SyntaxHighlighterの表示の不具合の原因・対処法
  • 現在のソースコードの表示について
スポンサーリンク

当ブログの執筆環境について

当ブログは「WordPress」で執筆しています。ブログのカスタマイズテーマは無料テーマの「cocoon」を使用しています。cocconは無料テーマですがシンプルで使いやすく、ブログ初心者な僕にとってはありがたい存在です。

それに加えて、このブログではプログラミングに関する内容も扱っているので、ブログでソースコードを見やすく表示させるためにプラグインの「SyntaxHighlighter Evolved」を導入しています。

public class Test {
    public static void main (String[] args) {
        System.out.println("Hello World !!");
    }
}

↑ソースコードをこのように表示させるプラグインです。コードを色付きで表示してくれるため見やすいですね。

一応cocoonにもソースコードハイライト機能が標準であり、「highlight.js」のハイライト機能が備わっています。今現在はこのブログもcocoonのソースコードハイライト機能

知らぬ間にソースコード表示がおかしくなっていた

ブログを開設して間もなかったことと、僕がブログ初心者であることから、色々と設定をいじったりしていたらいつの間にかSyntaxHighlighterの表示が変になってしまいました。当時のスクリーンショットを載せておきます。

SyntaxHighlighterの表示が変になった時のスクショ

表示崩れでしょうか?ソースコードをそのまま貼り付けたような表示になってしまいました。単にコードブロックで記述した場合と同じ表示になってました。つまりハイライト機能が動いていないということになります。

ソースコードの表示崩れの原因

最初はSyntaxHighlighterの設定がおかしいかな?と思って色々いじりましたが直らず。他に考えられる原因はcocoonを弄り回してたくらいなので、そっちを当たってみたら…

原因が判明しました。「cocoon設定」→「高速化」→「JavaScriptを縮小化する」にチェックが入っていたことが原因の様です。

cocoonでJavaScriptを縮小化する設定
JavaScriptを縮小化する設定

SyntaxHighlighterはjQuery(JavaScriptのライブラリの1つ)で動かしているので、縮小化すると上手く動いてくれないみたいです。 理由が分かったところで、同様の事例が無いかGoogle検索してみると別のプラグイン(Crayon SyntaxHighlighter)でしたが、ハイライト表示されない問題の記事がヒットしました。

表示崩れの解決方法

単に「JavaScriptを縮小化する」のチェックを外しても表示崩れは直りますが、このプラグインだけ縮小化を除外すればいいので、除外欄/plugins/syntaxhighlighter/と記述すれば解決します。ただ、サイトの読み込み速度は若干低下するかもしれません。

cocoonでJavaScriptを縮小化の除外設定
cocoonでJavaScriptを縮小化の除外設定

上記設定を入れたら無事ソースコードの表示崩れも直りました。こちらの方がコードがすっきりして見やすいです。元に戻って良かった!SyntaxHighlighter系プラグインは複数ありますが、cocoonだと同じ問題が起こってしまうため、同様に設定を見直したら治ると思います。

まとめ

今回やったことのまとめです。

ポイント
  • cocoonテーマでのSyntaxHighlighterプラグインの表示崩れは、高速化のためのJavaScriptの縮小化が原因
  • cocoonの設定で「JavaScriptの縮小化」のチェックを外すか縮小化の除外欄に/plugins/syntaxhighlighter/と記述すると治る

表示速度を向上するためにはJavaScriptをなるべく使わない方がいいですが、ソースコードを表示するブログでは兼ね合いが難しいですね。当ブログではJavaの記事が多いためこのプラグインだけ除外しています。

今はcocoon標準搭載のhighlight.jsに乗り換えています。一番の理由は読み込み速度が低下してしまうからです。特に外部プラグインは入れることで、サイトの速度が大きく低下する原因になりがちな為、削れるものは削った結果SyntaxHighlighterを使うのを辞めることにしました。

highlight.jsはjQueryに依存して無い分軽量で読み込み速度が速いです。機能面では行指定ハイライト機能が無いなどSyntax系よりやや劣るものの大きな不満点はありません。こだわりが無い方は無理にプラグインを使うより、highlight.jsの方を使って良いと思います。以上で記事を終わります。

スポンサーリンク
Dim雑記
タイトルとURLをコピーしました