AMPでコードハイライト（シンタックスハイライト）を適用するために、WordPressにhighlight.phpを導入する
最近AMPページへのアクセスが多いのだが、AMPページではJavascriptが使えず、そのためコードハイライトが行えていない状態になっている。この点をなんとかしたく、highlight.phpを導入することにしたので、そのメモ書き。
highlight.phpとは
highlight.phpとは、highlight.jsのPHP版である。highlight.jsはコード部分<code>〜</code>をjavascriptにより整形し表示をするが、highlight.phpはコード部分をサーバー側で処理した上で整形しHTMLとして表示する。サーバーサイドでレンダリングをするため、AMPのページでもハイライト表示が出来るというわけである。
GitHubにてプロジェクトが公開されており、以下でメンテナンスされている。
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のものをそのまま利用出来る。以下から適当なものを拾って利用。
デモを下記のサイトで確認し、
その後に該当するCSSを以下からダウンロードしておく。
私は、上記の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でもシンタックスハイライトを利用できるようになった。