MENU

WordPressでのシンタックスハイライトの導入

このサイトにはプログラムのコードが多いので、さっさと入れるべきだったのだが、面倒臭くてしていなかった。これまでシンタックスハイライトはjsのライブラリを導入していたが、今となってはそんなことは面倒臭いので、プラグインを入れようと思っていた。しかしシンタックスハイライトのプラグインはたくさんあるので、どれがよいかわからず、手を付けられていなかった。

ChatGPT-4に聞けばいいんだと今更ながら気づき、色々聞いて導入した。まぁとりあえず動いている。以下、記事にまとめさせた。

目次

イントロ

今回は、WordPressにシンタックスハイライトを導入する方法について説明します。シンタックスハイライトは、コードの読みやすさを向上させるための強力なツールです。

WordPressでコードのシンタックスハイライトを実装するには、主に以下の2つの方法があります。

  1. プラグインを使用する
  2. CodeMirrorなどのライブラリを自分で導入する

プラグインを使用する

これは最も簡単で、特別な技術的スキルが必要ない方法です。プラグインをインストールし有効化するだけで、シンタックスハイライトが利用できるようになります。

以下にいくつかの一般的なプラグインを挙げておきます。

  • Prism.js: 非常に軽量で、多くのプログラミング言語をサポートしています。WordPress用のPrism.jsプラグインは、「WP PrismJS」などがあります。
  • SyntaxHighlighter Evolved: 古くからあるプラグインで、多くの言語に対応しています。

CodeMirrorなどのライブラリを自分で導入する

もしより細かい制御が必要であれば、自分でJavaScriptライブラリを導入するという選択肢もあります。この方法は、シンタックスハイライトを手動で実装することになりますが、コードの見た目や動作を完全にカスタマイズできる利点があります。

CodeMirrorやHighlight.jsなどのライブラリを導入することで、このタスクを達成できます。ただし、これらのライブラリを使ってシンタックスハイライトを手動で実装するには、JavaScriptとWordPressのテーマのカスタマイズに精通している必要があります。

SyntaxHighlighter Evolvedの導入

Prism.jsやEnlighter - Customizable Syntax Highlighterといった有名なプラグインもありますが、今回は、シンプルさを最優先に考えるため、SyntaxHighlighter Evolvedを導入することにします。

このプラグインはWordPressのコミュニティで長い間利用されてきたものであり、その簡単さと信頼性が評価されています。特に設定を多く行う必要はなく、ショートコードを使用して簡単にブログ記事やページにコードブロックを挿入できます。

多くのプログラミング言語をサポートしており、その使いやすさと直感的な操作性は、シンプルさを追求するユーザーには特に魅力的です。そのため、特に高度なカスタマイズや特殊な機能を必要としないのであれば、SyntaxHighlighter Evolvedは非常に良い選択となります。

インストール

まずはプラグインのインストールから始めましょう。

  1. WordPressの管理ダッシュボードにログインします。
  2. 左側のメニューバーから「プラグイン」を選択し、「新規追加」をクリックします。
  3. 検索バーに「SyntaxHighlighter Evolved」を入力し、該当するプラグインを見つけます。
  4. 「今すぐインストール」をクリックします。
  5. インストールが完了したら、「有効化」をクリックします。

コードブロックの追加

次に、記事にコードブロックを追加してみましょう。以下にその例を示します。

<pre class="wp-block-syntaxhighlighter-code">
your code here
</pre>

ここで、language="css"の部分は、ハイライトを適用する言語に応じて変更します。たとえば、JavaScriptのコードをハイライトする場合はlanguage="js"とします。

Gutenbergにおいては、ブロックも用意されています。

追加の設定(必要に応じて)

SyntaxHighlighter Evolvedはデフォルトの状態でも非常に良く機能しますが、必要に応じてさまざまな設定を調整することもできます。設定はダッシュボードの左側のメニューバーから「設定」を選択し、「SyntaxHighlighter」をクリックすることで行えます。

既存の記事にシンタックスハイライトを適用する

しかし、既存の記事にシンタックスハイライトを適用するには、各記事を手動で編集してショートコードを追加する必要があります。これは、特に記事数が多い場合、一見大変そうに見えます。

データベースの検索置換ツールを使用すれば、一部の作業を自動化できるかもしれません。しかし、この方法は非常に注意が必要です。誤った操作が行われるとサイトに重大な問題を引き起こす可能性があります。したがって、必ず事前にデータベースのバックアップを取るなど、安全な手順を踏むようにしてください。

まとめ

結局のところ、既存の記事をどのように処理するかはあなた次第です。あなたのサイトはあなた自身のものです。必要に応じて、時間を見つけて徐々に修正するか、あるいは、特定の記事だけ修正することも可能です。

それにより、少なくとも新しい記事については、きれいにシンタックスハイライトされたコードを含むことができます。これは、コードの読みやすさを向上させ、読者にとってより価値のあるコンテンツを提供するための一歩となります。

寸評

プラグインの比較については色々と聞いたのだが、結局試したのはSynataxHighliter Evolvedだけなので、詳細につちえは省いた。まぁ十分ちゃんと動いているのでよしとする。

このサイトは比較的新しいサイトであるので、手動で全部置き換えることができたのだが、本館にあたる「或る阿呆の記 - 見栄を張らない、背伸びをしない。 私はただの阿呆です。 嘘です。 since 2012.10.17.」で手動による置き換えはさすがにつらい。これについては置換ツール(Better Search Replaceを勧められた)を使えという、まぁそうねという回答がきたのだが、調べたところなぜか<pre><code></code></pre>の数が合わないということが判明し、そのまま置き換えられねーというかなんで数あわねーんだぬおおぉぉみたいなことになり、挫けた。まぁどうせ昔の記事なんてほとんどアクセスもされないので、比較的アクセスの多い記事については気が向いた時に置き換えるくらいにしたいと思う。

以下は今回の質問。

  1. WordPressで、コードのシンタックスハイライトをいい感じで簡単に実装したい
  2. 特にこだわりはないので、簡単さのほうが大事だから、プラグインが良い。いくつかの有名なプラグインを比較してくれ。
  3. 柔軟性や機能の豊富さと簡単さはしばしばトレードオフの関係にある。見た感じこれらのプラグインも例に漏れないようだ。 僕は機能の豊富さや柔軟性よりもシンプルさを重視している。その観点では、君は何が良いと思う?
  4. オーケー。SyntaxHighlighter Evolvedの使い方を教えてくれ。
  5. なるほど便利だ。しかし、過去の記事にあるコードにこれを適用しなおすのはたいへんだ。なんとかならないか?
  6. 置換する手順を詳細かつ具体的に教えてくれ
  7. ちょっと検索してみたら、なぜか<pre><code>と</code></pre>の数が合わなかったよ……。どうやら過去の記事はぐちゃぐちゃになっているようだ。 個人サイトだし、ちょっと調べる気力はないな……。
  8. はぁ、まぁ、とりあえず新しい記事についてはSyntaxHighlighterを使っていくとしよう。 ここまでの話をブログの記事としてまとめてくれ。適切に見出しをつけてくれ。
  9. 他のプラグインも同様のことが言えるだろう。その中でSyntaxHighlighter Evolvedを選んだのは何故かについて書きたい。

最後のほうの質問については、なんか適当なことを言い始めたので打ち切った。

目次