AMPでコードハイライト（シンタックスハイライト）を適用するために、WordPressにhighlight.phpを導入する

2019年11月20日2019年11月21日WordpressカスタマイズWordpress,AMP

最近AMPページへのアクセスが多いのだが、AMPページではJavascriptが使えず、そのためコードハイライトが行えていない状態になっている。この点をなんとかしたく、highlight.phpを導入することにしたので、そのメモ書き。

highlight.phpとは

highlight.phpとは、highlight.jsのPHP版である。highlight.jsはコード部分<code>〜</code>をjavascriptにより整形し表示をするが、highlight.phpはコード部分をサーバー側で処理した上で整形しHTMLとして表示する。サーバーサイドでレンダリングをするため、AMPのページでもハイライト表示が出来るというわけである。

GitHubにてプロジェクトが公開されており、以下でメンテナンスされている。

GitHub - scrivo/highlight.php: A port of highlight.js by Ivan Sagalaev to PHP

A port of highlight.js by Ivan Sagalaev to PHP. Contribute to scrivo/highlight.php development b ...

 https://github.com/scrivo/highlight.php

Composerのインストール

Highlight.phpはComposerを使ってインストールする形となるため、まずはComposerを用意する必要がある。公式のマニュアルに従って進めていこう。

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'a5c698ffe4b8e849a443b120cd5ba38043260d5c4023dbf93e1558871f1f07f58274fc6f4c93bcfd858c6bd0775cd8d1') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

これで、Composerがインストールされた。

$which composer
/usr/bin/composer

$ composer -v
______
/ ____/___ ____ ___ ____ ____ ________ _____
/ / / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__ ) __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
/_/
Composer version @package_branch_alias_version@ (1.0.0-beta2) 2016-03-27 16:00:34

highlight.phpのインストール

続いて、Highlight.phpをインストールする。
これも、先ほどの公式ドキュメントの通りに進めれば良いのだが、インストール先はwordpressのディレクトリ内部、それも使用しているテーマファイルの中とする必要がある点に注意。

私の場合、/wordpress/wp-content/themes/luxech/の中にインストールをした。

$pwd
/wordpress/wp-content/themes/luxech
$ composer require scrivo/highlight.php
Using version ^9.15 for scrivo/highlight.php
./composer.json has been created
Loading composer repositories with package information
Updating dependencies (including require-dev)
- Installing scrivo/highlight.php (v9.15.10.0)
Downloading: 100%

Writing lock file
Generating autoload files

これでインストールは完了。
vendor/scrivoというディレクトリのなかに、hilight.phpがインストールされている。

$ ls
autoload.php composer scrivo

シンタックスハイライト用のCSSを配置する

シンタックスハイライト用のCSSは、highlight.jsのものをそのまま利用出来る。以下から適当なものを拾って利用。

デモを下記のサイトで確認し、

We're not a CDN - highlight.js

We're not a CDN - highlight.js highlight.js Usage News Demo Download Docs GitHub We're ...

 https://highlightjs.org/static/demo/

その後に該当するCSSを以下からダウンロードしておく。

Unknown Title

{"payload":{"allShortcutsEnabled":false,"path":"src/styles","repo":{"id":1213225,"defaultBranch" ...

 https://github.com/highlightjs/highlight.js/tree/master/src/...

私は、上記のCSSをそのまま子テーマのCSSにコピーして利用した。

function.phpに追記をして、highlight.phpが使えるようにする

続いて行うのは、Function.phpの編集。ここでは、<pre><code>等のコード部分に相当する部分があった場合には、highlight.phpを用いてシンタックスハイライト処理をするように記載をする。
まず、function.phpの冒頭部分に、highlight.phpを読み込むための設定を追加。

require_once__DIR__ . '/vendor/autoload.php';
useHighlight\Highlighter;

続いて、以下の2つを満たすような形でfunctionを書いた。

• <pre><code>〜</code></pre>と続く場合、classに"hljs"を自動指定
• 言語が指定されていない場合は、言語を自動選択
• 言語がclass名称で指定されている場合、当該の言語でハイライト
• 言語が見当たらない場合の例外処理は行わない

add_filter('the_content', function($content){
     $content = preg_replace_callback('/<pre><code(.*?)>(.+?)<\/code><\/pre>/s', function($matches){
          $highlighter = new Highlighter();
          $input = html_entity_decode($matches[2]);
          $haveclassname = preg_match('/class=\"(.*)\"/',$matches[1],$classname);

          if ($haveclassname) {
               $output = $highlighter->highlight($classname[1],$input)->value;
               $html = '<pre><code class=”hljs '.$classname[1].'">'.$output.'</code></pre>';
          } else {
               $highlighter->setAutodetectLanguages([
               'html',
               'php',
               'css',
               'shell',
               'javascript',
               'perl'
          ]);

          $output = $highlighter->highlightAuto($input)->value;
          $html = '<pre><code class="hljs '.$highlighter->highlightAuto($input)->language.'">'.$output.'</code></pre>';
     }
     return $html;
     }, $content);

return $content;
});

これで、AMPでもシンタックスハイライトを利用できるようになった。