contact
commono
【WP】SyntaxHighlighter Evolved を Ajaxに対応させる方法
Tips

2017.01.17

【WP】SyntaxHighlighter Evolved を Ajaxに対応させる方法

みなさんこんにちは、フロントエンド・エンジニアの山本です。
遅ればせながらcommonoのjournal記事をシンタックスハイライトに対応させたのですが、
WordPressプラグインの「SyntaxHighlighter Evolved」をそのまま適応させると
ajaxで読み込んだコンテンツに対してはシンタックスハイライトが実行されないという事態に陥り、
微妙にハマってしまったので、もしお役に立てばと思い公開します。

Ajaxで読み込まれたコンテンツにシンタックスハイライトが実行されない原因

今回の記事は、WordPressのシンタックスハイライトの定番プラグインである
「SyntaxHighlighter Evolved」をajaxに対応させるというものですが、
こちらのプラグイン、定番だけあってインストール方法や基本的な使用方法は、
他所様のサイトできれいにまとまっているものが多数ありますので、
今回も、基本の部分は割愛させていただきます。
さて、今回のケースは、

  1. WordPressサイトで、かつjQueryのAjaxを利用してページを遷移させている。
  2. WPプラグイン「SyntaxHighlighter Evolved」をインストールしている。

が前提となります。
まずは、なぜそのままではAjaxでこのプラグインがそのまま動かないかといいますと、
こちらのプラグインはjsライブラリとして開発されている
SyntaxHighlighterがベースになっているのですが、
プラグイン版では、php側の処理とjsの処理が分かれていて、
php側ではjsライブラリのSyntaxHighlighterが解釈できる形に、
ショートコードの中身を整形し、それをさらにjsでシンタックスハイライトされた形に整形する
という大まかに2段階の処理を行っているからのようでして、
php側はコンテンツを書き出すタイミングでその都度処理されるのに対して、
jsの処理はデフォルトでは最初ページが読み込まれたときの一度のみしか実行されないためです。
ですので、jsが実行されない状態ではphp側の処理のみが実行されて、

<pre class="brush: jscript; title: ; notranslate" title="">
// ソースコードがここに来ます。
</pre>

という状態のコードが出力されます。

対応方法

方法は見つけてみれば簡単というものなのですが、

  1. Ajaxでコンテンツが読み込まれた後、SyntaxHighlighter.highlight();を実行する
  2. プラグインの設定画面で、「すべてのブラシを読み込む」にチェックを入れる

の2点を行なうことで解決できました。
※古い記事ではありますが、StackOveflowのこちらの記事が参考になりました。
SyntaxHighlighterには、そもそもシンタックスそもそもハイライトを実行するためのメソッドがデフォルトで用意されているのですが、
そのうちSyntaxHighlighter.highlight();は、
いつでも呼び出したタイミングでシンタックスハイライトを実行してくれるメソッドで、
Ajaxでページにphp側で処理されたコンテンツを読み込んだ後に、このメソッドを呼び出すことで、
新しく読み込まれたコンテンツに対してもシンタックスハイライトが適応されます。
php側で処理されたコードは前述の通り、<pre></pre>で囲われるので、
commonoのサイトでは、

function recallSyntaxHighlighter(){
if( typeof SyntaxHighlighter != 'undefined' &amp;&amp; $('pre').length ){
SyntaxHighlighter.highlight();
}
}

という関数を作って、ajaxを実行して、ページのコンテンツが読み込まれた段階で、
呼び出すことで対応をしました。
ただし、SyntaxHighlighterは読み込みを効率化するため、
各言語(html、css、jsなど)をシンタックスハイライトするためのファイル(「ブラシ」と呼んでいます)が分けてあり、
一番最初のタイミングで必要なファイルだけを読み込むらしく、
ロードした画面で使用していない言語は、SyntaxHighlighter.highlight();を実行しても、
それだけでは、シンタックスハイライトされないようですので、
ここにチェック
SyntaxHighlighterののプラグイン管理画面から、
「すべてのブラシを読み込む」にチェックを入れてあげることで、
あらかじめすべてのブラシを読み込んでくれるので、
デフォルトでプラグインが対応している言語に対してはどのタイミングでも
シンタックスハイライトが実行されるようになります。

Written by
Shinji Yamamoto

Relative Post

Latest Journal

ajaxっぽいスムーズな画面遷移の方法(3/3)

ajaxっぽいスムーズな画面遷移の方法(3/3)

Shinji Yamamoto
2017.12.28
ajaxっぽいスムーズな画面遷移の方法(2/3)

ajaxっぽいスムーズな画面遷移の方法(2/3)

Shinji Yamamoto
2017.11.24
ajaxっぽいスムーズな画面遷移の方法(1/3)

ajaxっぽいスムーズな画面遷移の方法(1/3)

Shinji Yamamoto
2017.11.22
スムーススクロールがうまく動かない場合の解決方法

スムーススクロールがうまく動かない場合の解決方法

Shinji Yamamoto
2017.11.22
Javascript APIでのストリートビュー実装方法

Javascript APIでのストリートビュー実装方法

Shinji Yamamoto
2017.11.15
指定の範囲までついてくるフローティングバナー

指定の範囲までついてくるフローティングバナー

Shinji Yamamoto
2017.07.13

View all

Get in touch

コモノ株式会社は
デザインパートナーです

デザインは課題を解決するまでの手段を設計する事です。
目的にあった最適解を見出し、それに向けて伴走します。
また、ブランディングは長期的な大局を見据えた施策が必要不可欠です。
未来のビジョンを策定し、プランニングをして確実に歩みを進めましょう。
どんなことでも構いませんので、クリエイティブが必要な時にはお声がけください。

  • お電話での問い合わせ

    011 215 8660

    営業時間 10:00-19:00
    (土日祝日除く)

  • フォームでのお問い合わせ

    Contact Form

    2~3営業日以内に折り返します

  • 資料ダウンロード

    Coming soon