WordPressテーマ「Godios.」(dev.toに匹敵する速度を出せるWordPressテーマを開発した話)のpjaxモードを使用した際、シンタックスハイライトのライブラリPrism.jsがうまく動かなかったのでその解決法。
Prism.jsは次のように<code>
のclassに言語を指定することでコードが装飾されます。prism.js
が実行されると<code>
タグに指定したlanguage-{言語}
classが<pre>
にも動的に追加されます。
<!-- 記述例 -->
<pre>
<code class="language-javascript">
console.log('Prism.js');
</code>
</pre>
<!-- prism.jsが実行されるとpreタグにlanguage-javascriptクラスが追加される -->
<pre class="language-javascript">
<code class="language-javascript">
console.log('Prism.js');
</code>
</pre>
一方、pjaxは遷移先ではJavaScriptが実行されないので、<pre>
タグの書き換えが発生せずにprism.css
の背景色が適用されません。下は実際の画像ですが<code>
部分などにはcssが適用されているのがわかります。
問題は<pre>
の書き換えだけのようなので、遷移先でprism.js
の関数を再度実行すれば解決しそうです。ググったらドンピシャのがありました。
How To Re-Run Prism.js On AJAX Content
Developper ToolsのコンソールでPrism.highlightAll();
を実行すると無事変わりました。あとはWebサイトの方でも遷移先で実行するように書いてあげればOKです。(Godiosの場合は子テーマの/js/god-dispatcher.js
のgodDispatcher
関数に加えます。(参考)