1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-04

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関数に加えます。(参考)

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?