たいしょんブログのデザインが新しくなりました!

Cocoonでソースコードのハイライトが効かないときの対処法

Web技術
スポンサーリンク

先日このブログを新しいテーマ「Cocoon」に切り替えました。数日間実際に使用してみて感動させられる部分が多かったですが、一部困った点がありましたのでその内容と解決方法を共有できればと思います!

Cocoonでコードのハイライトが効かない

気づいたのは今週月曜日ごろで、「Crayon Syntax Highlighter」をオフにしてCocoonの「ソースコードをハイライト表示」をオンにした際に気づきました。

ちなみに症状としてはハイライトされず、背景がグレーのままになっているというものです。

実際の表示

ちょっともやもやしましたので何かエラーが表示されていないか調べてみました。するとコンソールで下記のようなエラーが表示されていました。

Uncaught ReferenceError: hljs is not defined
たいしょん
たいしょん

「hljsなんて宣言されてないんだけどどういうこと?」っていうエラーですね。でもhighlight.jsを読み込んでいますし最初は意味が分かりませんでした。。。

そもそもhighlight.js読み込まれていないのではないか疑惑

highlight.jsが存在していればそもそも動作するはずですよね。そこでコードを調べてみたのですが、ちゃんとありました。ますます謎が深まる。。。

ローカル環境はなぜかハイライトできていた

実はローカル環境でもテスト用に同じ環境が組まれているのですが、ローカル環境ではなぜかしっかりコードがハイライト表示されていました。

そこで差分を調べてみると、「async charset=”utf-8″」が追加されていました。

たいしょん
たいしょん

追加した覚えがないんだけど、、、これもしかしてkusanagiが勝手に高速化のために挿入してるんじゃないか?

ただし理由はどうであれ、「async charset=”utf-8″」が怪しそうです。

色々調べてみたのですが、ハイライト系は非同期にするとうまく動かないことがあるそうです。

WordPressでscript要素をまるっとサクッと非同期化する方法
WordPressのwp_head()関数、wp_footer()関数に出力されるscript要素を非同期化する方法について紹介します。

そして該当のコードを見つける

色々と探しているうちに、ついに該当のコードを発見しました。こちらはCocoon子テーマの「function.php」です。

<?php //子テーマ用関数

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

//以下に子テーマ用の関数を書く
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.min.js' ) ) return $url;
return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}
たいしょん
たいしょん

犯人はお前ダーーーッ!!!

どうやらこちらで「async charset=”UTF-8″」を挿入しているようですね。

そこで以下のコードに書き換えました。

<?php //子テーマ用関数

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

//以下に子テーマ用の関数を書く
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url; //.js以外は対象外
if ( strpos( $url, 'jquery.min.js' ) ) return $url;
if ( strpos( $url, 'highlight.min.js' ) ) return $url; //'highlight.min.js'は、async対象外
return "$url' async charset='UTF-8"; // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

こちらにしたところ、コードのハイライトが効くようになりました!!!

修正後の画像

どういうことかと言いますと、highlight.jsは使用する際に下記のような処理を書くのですが下記の処理がhighlight.jsが完全に読み込まれる前に実行されてしまうのでhljsが無いと怒られてしまうわけですね。

<script>(function($){$(".entry-content pre").each(function(i,block){hljs.highlightBlock(block)})})(jQuery);</script>

今回はWeb制作に従事する身としては焦りましたが、無事に解決してよかったです。製作者のわいひらさんに報告した方がいいかもしれませんね。

もし同じ境遇に遭われた方は、こちらの方法をお試しください!!

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Web技術
スポンサーリンク
たいしょんをフォローする
たいしょんブログ
タイトルとURLをコピーしました