Unsplashはじめにシンタックスハイライトを行うライブラリとしてJavascriptのhighlight.jsが有名ですが、JavascriptではなくPHP版のhighlight.phpというものがあります。JavascriptではなくPHPだと何が嬉しいかと言うと、AMPではJavascriptが基本的に動作できないため、highlight.jsを使用することができません。そこでPHP版のhighlight.phpを使用すれば、サーバーサイドでのハイライターとして動作します。Javascriptを使わない、すなわちAMP対応のページでも問題なく動作します。AMP対応のWebサイトでない場合でも、読み込むJavascriptを減らせるので表示速度の高速化が期待できます。この記事では、WordPressでhighlight.phpを使用する手順をまとめます。PHPはインストール済とする。LinuxPHPのバージョン情報は以下です。Technologiesなお、PHPのパッケージ管理システムであるComposerを以降の手順で使用します。Composerをインストールしていない場合は、はじめにComposerをインストールする必要があります。以下にComposerのインストール手順をまとめていますので、必要な方は見てみてください。レンタルサーバのような共有環境でもインストール可能です。Linuxの両方に入れる機会があったのでその手順をメモします。Linuxで手順は同じです。グローバル、ローカルそれぞれにインストール手順もまとめます。virment.comComposerを使ってhighlight.phpをインストールするここでは、WordPressにて実際に使用しているテーマファイルのディレクトリにComposerを使ってhighlight.phpをインストールします。Composerはグローバル環境、ローカル環境のどちらにインストールされていても問題ありません。ここでは、WordPressのテーマファイルのディレクトリをmythemeとし、mytheme/binにComposerがインストールされている前提で進めます。Composerがインストールされていればhighlight.phpのインストールは簡単で、以下のコマンドを実行するだけです。files以上でhighlight.phpのインストールは完了です。自身のテーマファイルのディレクトリにvendorというディレクトリが作成され、そこの中にhighlight.phpがインストールされています。続いて実際にWordPressでhighlight.phpを使うための手順を説明します。function.phpに追記するhighlight.phpをWordPressのテーマファイル内で使用するために、function.phpにいくつか追記します。Composerでインストールしたhighlight.phpを読み込むために、以下をfunction.phpに追記します。</code></pre>など)を探してシンタックスハイライトを適用するために以下の関数をfunction.phpに追加します。追加箇所はfunction.phpの一番最後で大丈夫です。</code></pre>等を探し出す。以下でシンタックスハイライトを行いたい言語を追加しておきます。以下の中からhighlight.phpが自動でハイライトルールを選択します。10);上記のapplySyntaxHighlightingという関数は自分で定義した関数であり、WordPress記事本文の中に含まれるコード部分を検索し、ハイライト処理を行ないます。重要なのは以下3点です。それぞれについて後述します。$patternに記事本文のコード部分の検索を行うための正規表現を指定します。setAutodetectLanguagesに渡す引数にハイライトしたい言語を指定します。add_filterでWordPressのthe_content関数のフィルターとして登録します。</code></pre>を検索することができます。</code></pre>ではなく、例えば何かしらCSSのクラスを使用しているような場合は、検索がマッチするよう正規表現をそれぞれの状況に合わせて調整する必要があります。</code></pre>というように、<pre>と<code>の間に<span>が入っている場合と入っていない場合の両方があります。よって、これを検索するには正規表現を以下のようにします。class="code-title">.*</span>)?<code[^>]*>\K.*(?=</code></pre>)~Uis';ここの正規表現で正しく自身のコード相当部分を検索できないとハイライトできません。setAutodetectLanguagesにハイライトしたい言語を指定する以下のように、ハイライトしたい言語を事前に指定しておく必要があります。]);highlight.phpでは、highlight.jsと同様に現在185言語に対応しています。対応言語は以下から確認できますので、自身の記事の中で使うであろう言語を指定しておきます。languageshighlightjs/highlight.jsgithub.comadd_filterを使ってフィルターとして登録するWordPressでは、the_contentという関数によって記事本文を出力することができます。この出力前後で記事本文に対して何かしらの修正を加える方法としてadd_filterが用意されています。the_content関数は通常だと記事の出力に使われており、当然ながらthe_content関数に対するフィルターは全ての記事に影響します。したがって、事前に思っている動作をするかをテスト環境などで確認することをおすすめします。ここではadd_filterの詳細は省略しますが、以下の記事が大変参考になりました。対してフィルターをかけます。qiita.com以上でfunction.phpへの追記は完了です。上記の関数については以下の記事を参考にさせて頂きました。ありがとうございました。side.stefanzweifel.ioハイライト用のCSSを追加する最後に、ハイライト用に使用するCSSスタイルを自身のWordPressテーマに追加します。highlight.phpではhighlight.jsと同じスタイルが使用でき、以下のサイトから好きなものを選択します。以下ページを開いて左側のメニューの「Styles」から好きなものをクリックしてどのような見た目になるかを確認できます。Eightiesを使用しています。使用したいスタイルが決まったら、今度は以下のページに全てのスタイルのCSSファイルが置いてあるので決めたスタイルファイルを開きます。Eightiesならばtomorrow-night-eighties.cssを開きます。以下のような中身になっているのでこれを全てコピーします。bold;}あとは上記CSSを自身のテーマファイルのCSSに追記すれば完了です。highlight用のCSSファイルをダウンロードしてインポートしてもOKです。</code></pre>のようにhljsクラスが指定された<code>タグが必要です。これまでに公開済の自分の記事内のコード部分で<code>タグでhljsが指定されていない場合は、指定しない限りハイライトは有効になりません。記事が少ない場合は手作業でも良いですが、記事が多い場合は、WordPressのMySQLデータベースをエクスポートして一括置換してしまうのが一番はやいです。まとめAMP対応にあったってシンタックスハイライトをJavascriptを使わずに実現する方法が意外にネット上にも情報が少なかったのでメモとして残しておきます。WordPressでブログを作成している場合、そのブログのトップページとして投稿ページを一覧表示している場合が多いと思います。Analyticsからモバイル表示の問題が深刻のため対応するようメールが届いていました。WordPressサイトを構築する際に、現在は色々なレンタルサーバがあり選択肢も豊富です。WINGに移行したところ、予想を大きく上回る改善となりました。コメントをキャンセルメールアドレスが公開されることはありません。virtualiment。