Edited at

pjaxでPrism.jsを正しく動作させる

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>のCSSが適用されていない

問題は<pre>の書き換えだけのようなので、遷移先でprism.jsの関数を再度実行すれば解決しそうです。ググったらドンピシャのがありました。

How To Re-Run Prism.js On AJAX Content

Developper ToolsのコンソールでPrism.highlightAll();を実行すると無事変わりました。あとはWebサイトの方でも遷移先で実行するように書いてあげればOKです。(Godiosの場合は子テーマの/js/god-dispatcher.jsgodDispatcher関数に加えます。(参考)