Wordpress

2020.09.07

AMP対応|highlight.phpでコードを見やすくシンクタックスハイライト

AMP化した時にシンタックスハイライトのプラグインが使えなくなったので、javascriptを使わずサーバー側で整形するhighlight.phpを導入してみようかと、さくらインターネットのレンタルサーバーにcomporserをインストールしました。SSHでの接続も数年前に数える程しか経験ないド素人ですが、ネットを参考にチャレンジしてみました。

phpでシンクタックスハイライト

シンクタックスハイライトとは、自動的に色をつけたりしてコードを読みやすくするものです。WordpressではCrayon Syntax Highlighterなどいくつもプラグインがあります。ただ、これ系のプラグインはjavascriptを使っているものが多く、AMPでは使用できません。AMPではサーバーサイドで整形するものが必要になります。

highlight.phpってなに?

highlight.phphighlight.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(使用言語)"が付くので、ブロックエディターならコードブロックにコードを入力するだけで自動的にハイライトしてくれます。