先日このブログを新しいテーマ「Cocoon」に切り替えました。数日間実際に使用してみて感動させられる部分が多かったですが、一部困った点がありましたのでその内容と解決方法を共有できればと思います！
Cocoonでコードのハイライトが効かない
気づいたのは今週月曜日ごろで、「Crayon Syntax Highlighter」をオフにしてCocoonの「ソースコードをハイライト表示」をオンにした際に気づきました。
ちなみに症状としてはハイライトされず、背景がグレーのままになっているというものです。
ちょっともやもやしましたので何かエラーが表示されていないか調べてみました。するとコンソールで下記のようなエラーが表示されていました。
Uncaught ReferenceError: hljs is not defined
そもそもhighlight.js読み込まれていないのではないか疑惑
highlight.jsが存在していればそもそも動作するはずですよね。そこでコードを調べてみたのですが、ちゃんとありました。ますます謎が深まる。。。
ローカル環境はなぜかハイライトできていた
実はローカル環境でもテスト用に同じ環境が組まれているのですが、ローカル環境ではなぜかしっかりコードがハイライト表示されていました。
そこで差分を調べてみると、「async charset=”utf-8″」が追加されていました。
追加した覚えがないんだけど、、、これもしかしてkusanagiが勝手に高速化のために挿入してるんじゃないか？
ただし理由はどうであれ、「async charset=”utf-8″」が怪しそうです。
色々調べてみたのですが、ハイライト系は非同期にするとうまく動かないことがあるそうです。
そして該当のコードを見つける
色々と探しているうちに、ついに該当のコードを発見しました。こちらはCocoon子テーマの「function.php」です。
<pre><?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 );
}</pre>どうやらこちらで「async charset=”UTF-8″」を挿入しているようですね。
そこで以下のコードに書き換えました。
<pre><?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 );
}</pre>こちらにしたところ、コードのハイライトが効くようになりました！！！
どういうことかと言いますと、highlight.jsは使用する際に下記のような処理を書くのですが下記の処理がhighlight.jsが完全に読み込まれる前に実行されてしまうのでhljsが無いと怒られてしまうわけですね。
<pre><script>(function($){$(".entry-content pre").each(function(i,block){hljs.highlightBlock(block)})})(jQuery);</script></pre>今回はWeb制作に従事する身としては焦りましたが、無事に解決してよかったです。製作者のわいひらさんに報告した方がいいかもしれませんね。
もし同じ境遇に遭われた方は、こちらの方法をお試しください！！
