2020.09.07
AMP対応｜highlight.phpでコードを見やすくシンクタックスハイライト
AMP化した時にシンタックスハイライトのプラグインが使えなくなったので、javascriptを使わずサーバー側で整形するhighlight.phpを導入してみようかと、さくらインターネットのレンタルサーバーにcomporserをインストールしました。SSHでの接続も数年前に数える程しか経験ないド素人ですが、ネットを参考にチャレンジしてみました。
この記事の目次
phpでシンクタックスハイライト
シンクタックスハイライトとは、自動的に色をつけたりしてコードを読みやすくするものです。WordpressではCrayon Syntax Highlighterなどいくつもプラグインがあります。ただ、これ系のプラグインはjavascriptを使っているものが多く、AMPでは使用できません。AMPではサーバーサイドで整形するものが必要になります。
highlight.phpってなに？
highlight.phpはhighlight.jsのphp版です。本家javascriptのものは、ブラウザで表示する時にローカル上でハイライト（cssを追加）するのに対して、php版はサーバー側でハイライトしたものを表示します。なのでAMPにも対応できます。
ただしインストールはcomposerから行うためSSHでサーバーに接続したりで、僕にはちょいハードルが高いと思っていましたが、やってみればなんてことはないです。
composerってなに？
まずはhighlight.phpを使うためにcomposerをインストールします。composerはPHPのライブラリーを管理するツールです。
highlight.phpはcomposerでインストール
highlight.phpのインストール以外にcomposerを使用する予定はないので、直接テーマフォルダ内にインストールすることにしました。
さくらのレンタルサーバーにSSHで接続
まずはSSHでサーバーに接続します。macなので、ターミナルから。
ターミナルは、アプリケーション ＞ ユーティリティの中にあります。
ssh FTPアカウント@FTPサーバFTPパスワードを聞かれるので、入力。
ログインしてみるとなんかいろいろ調べてたサイトと違う。参考してるページは行頭が「$」、でもこっちでは「％」になってる。う〜ん。全く知識がないのでちんぷんかんぷん。
調べた結果さくらインターネットはログインシェルがcshのようです。
「pwd」で現在のデレクトリがわかります。「/home/アカウント」にログインしているとわかります。
% pwd
/home/アカウント「cd」でインストールするデレクトリまで移動します。今回はテーマフォルダまで。アドレスをコピペするのが楽ですが、「ls」でファイルやデレクトリの一覧が確認できるので、ひとつづつ移動していってもいいです。
% cd /www/アカウント/wordpress/wp-content/themes/使用中テーマテーマフォルダの中にcomposerをインストールするデレクトリを作って移動。なんでもいいですが、「bin」にしました。
% mkdir bin
% cd binサーバーにcomposerをインストール
composerのインストールは下記コマンドをコピペするだけです。
% curl -sS https://getcomposer.org/installer | php完了すると以下のように表示されます。
起動するとcomposerのロゴが表示されます。ここまでで達成感がありましたが、ようやくスタートライン。
highlight.phpをインストール
composerと同じデレクトリーにhighlight.phpをインストールします。
% php composer.phar require scrivo/highlight.phpこの記事の場合は「テーマフォルダ/bin/vender」にインストールされています。
AMPページでシンクタックスハイライト
highlight.phpをWordpressに読み込む
function.phpに下記のコードを追記して、highlight.phpを読み込んで使えるようにします。
functions.php
require_once __DIR__ . '/bin/vendor/autoload.php';
use Highlight\Highlighter;WordPressでのハイライトについてはこちらの記事を参考にさせていただきました。ありがとうございます。
functions.php
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;
});ブロックエディターの「コード」を使った場合、<pre>にclass="wp-block-code"がつくので、2行目の正規表現で検索するところを下記のようにしました。
$content = preg_replace_callback('/<pre class="wp-block-code"><code(.*?)>(.+?)<\/code><\/pre>/s', function($matches) {highlight.jsのcssを使ってカスタマイズ
highlight.jsのcssが使えるので、cssのデモからイメージに合うものを選んでGitHubからコピペorダウンロード。テーマのstyle.cssに追記するか、cssファイルを作成してhead.phpに読み込むかしてください。
highlight.js cssのデモはこちら
https://highlightjs.org/static/demo/
highlight.js css ダウンロードはこちら
https://github.com/highlightjs/highlight.js/tree/master/src/style
使い方
<pre><code>で囲まれていたら自動でclass="hljs php（使用言語）"が付くので、ブロックエディターならコードブロックにコードを入力するだけで自動的にハイライトしてくれます。
