PHP7.3.8にしたところ、コードの見やすくしているCrayon Syntax HighlighterというWordPressのプラグインからエラーでました。

Crayon Syntax Highlighterは、WordPressの投稿に書かれたソースコードを、見やすく強調など色付けしてくれるプラグインです。

どうやら、メンテナンスされていないので、別のものに変えることにしました。

highlight.js

記事を書きやすくするため、また過去の記事を修正しないため、できるだけ自動でプログラムを検出して欲しかったのですが、要件に合うWordPressのプラグインは見つかりませんでした。

WordPressのプラグインである必要もないので、JavaScriptのライブラリで検索するとhighlight.jsが見つかりました。

highlight.js

使い方

使い方はすごく簡単で、表示させたいスタイルのCSSとhighlight.jsをリンクさせて、hljs.initHighlightingOnLoad()を実行するだけです。

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

デフォルトでは、<pre><code>が強調されます。
以前投稿した記事は、<pre>でしか囲んでいなかったので、変える必要があります。

jQuery

$(function() {
    $('pre').each(function(i, block) {
        hljs.highlightBlock(block);
    });
});

Native JavaScript

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

プレフィックス

Class名を設定して言語を指定することもできます。
Class名にはlanguage-lang-のプレフィックスを付けることもできます。nohighlightを使うと強調が無効になります。

サポートしていない行番号

highlight.jsは、意図的に行番号をサポートしていないです。
過去の投稿を見返していませんが、「何行目が」という記述の記憶がなかったので、良しとしました。あったら、ごめんなさい。

そのほかバージョンアップによるトラブル

WordPress Popular Postsというプラグインを使用しています。
ウィジェットで表示していましたが、画像がでなかったりおかしくなったので、非表示にしました。

自分のブログなのでそんなに問題ないですが、仕事で使っていたとしたら厳しかったかもしれません。

また、自作テーマ内でエラーが出ていました。エラーを見つけた方がいたらご連絡ください。

では、また!

WordPressデザインレシピ集
狩野 祐東
技術評論社
売り上げランキング: 176