WordPressのコード表示を自作｜Takinoko Code Studioの機能と使い方

コード解説の記事を読んでいて、「どこが文字列で、どこが関数なのか分かりにくい」「スマートフォンでは長い行が読みにくい」と感じることがあります。内容が良くても、コードを読むところで引っかかると、試してみるまでの距離が長くなってしまいます。

そこで、当サイトのデザインに合わせたWordPress用コード表示プラグイン「Takinoko Code Studio」を作り、GitHubでソースとインストール用ZIPを公開しました。コードの色分け、コピー、行番号、横スクロールと折り返しを、一つの枠にまとめています。

プラグインのZIPをダウンロード ／ GitHubでソースを見る

コード表示を見直した理由

当サイトでは、これまでSyntaxHighlighter形式のコードブロックを使っていました。記事を確認すると、多くの枠がplain、つまり色分けなしで出力されていました。サイト全体のレイアウトを変えても、コード部分だけが以前の見た目のまま残っていたことも、読みづらさの原因です。

今回の実装では、記事本文を書き換えるのではなく、保存済みのコードを読み取って表示を整える方針にしました。見た目を変えるたびに昔の記事を一つずつ修正する作業を減らし、コードのインデントや改行を保つためです。

どんな機能がある？

• 構文の色分け：文字列、数値、関数、コメントを区別しやすくします。
• コピー：コード本文だけをコピーします。行番号やボタンの文言は混ざりません。
• 行番号：記事の説明とコードの位置を対応させやすくします。
• 横スクロールと折り返し：長い行の読み方を、読者が切り替えられます。
• 言語とファイル名：JavaScriptやPythonといった言語、hello.jsなどの名前を表示できます。
• 編集用ブロック：WordPressのブロックエディタから、言語や表示設定を選べます。

配色は、当サイトの濃いグリーンを土台に、ライム、紫、青などを使っています。スマートフォンではコード枠の中だけを横にスクロールできるようにし、コードがページ全体を横にはみ出さないようにしています。

折り返し表示では行番号を隠します。一つのコード行が画面上で二行、三行に分かれると、番号と見た目の位置がずれるためです。横スクロール表示に戻せば行番号も戻ります。

WordPressへのインストール方法

1. GitHubのリリースページから、添付ファイルのtakinoko-code-studio.zipをダウンロードします。
2. WordPress管理画面で「プラグイン → 新規追加 → プラグインのアップロード」を開きます。
3. ダウンロードしたZIPを選び、インストールして有効化します。
4. コードを含む記事を開き、見た目、コピー、スマートフォンでの表示を確認します。
5. SyntaxHighlighterから切り替える場合は、確認後に旧プラグインを無効化します。すぐに削除する必要はありません。

リリースページにはGitHubが生成する「Source code」のZIPも表示されます。WordPressへ導入するときは、添付のtakinoko-code-studio.zipを選んでください。キャッシュプラグインなどを使用している場合は、切り替え後に古い表示が残っていないかも確認します。

新しい記事にコードを追加する

ブロックの追加から「Takinoko コード」を選び、コードを貼り付けます。右側の設定では、言語、任意のファイル名、開始行番号、行番号の表示、折り返しを変更できます。

例えば、次のような短いJavaScriptを載せる場合は、言語をJavaScript、ファイル名をhello.jsにします。これは表示するサンプルであり、プラグインが実行するものではありません。

const message = "動いた！";
console.log(message);

ショートコードで追加することもできます。新規の記事には、専用のtkcodeを使います。

[tkcode language="javascript" filename="hello.js"]
const message = "動いた！";
console.log(message);
[/tkcode]

プラグインはHTMLやJavaScriptをコードの文字列として表示します。読者がコピーして自分の環境で試すときは、その環境でコードを実行することになります。

以前のコードブロックはどうなる？

SyntaxHighlighterの既存ブロックと、WordPress標準のコードブロックを読み取り、新しい枠で表示します。従来のcode、sourcecode、javascript、pythonなどの主要なショートコードも読み取れます。通常の「整形済みテキスト」ブロックは、そのままにしています。

旧プラグインでplainと指定されていたコードは、対応する言語の中から自動判定します。判定した言語にはAUTOと表示します。ただし、短いコードや似た文法は誤判定しやすいため、確信が低いものは色分けなしで表示します。記事の編集時に言語を明示するのが、最も確実です。

旧プラグインの機能をすべて再現したわけではありません。強調行、自動リンク、折り畳みなどの旧設定は引き継ぎません。クラシックエディタの古いショートコードには保存時のエンコード方式もあるため、新規コードには専用ブロックかtkcodeを使うことを推奨します。

公開前に確認したこと

公開記事のデータから、1,032個のpre形式の表示を検証しました。新しい枠へ変換しても、コードの文字列、空白、改行が同じになることを確認しています。このうち1,030個は旧SyntaxHighlighter形式でした。

• WordPressの実際のショートコード・整形関数を使った、HTML、文字参照、日本語、改行のテスト。
• WordPressのブロック保存処理を使った、新旧のコードブロックの保存形式の検証。
• ローカルブラウザでのコピー内容、横スクロール、折り返し、320px・390px幅での表示確認。
• JavaScriptを無効にした場合もコード本文が読めること。
• GitHub ActionsによるPHP構文、互換処理、ブロック保存形式の自動テスト。

これらはローカル環境と自動テストでの確認です。テーマ、キャッシュ、他のプラグインによって組み合わせは変わるため、導入先でも記事表示と編集画面を確認してください。

対応環境と実装について

プラグインの動作対象はWordPress 6.0以上、PHP 7.4以上です。JavaScript、Python、HTML／XML、CSS、JSON、SQL、Rustなどを色分けできます。VBAの表示にはVB.NETの文法を利用しており、VBA固有の構文を完全に解析するものではありません。未知の言語や長大なコードは、本文をそのまま表示します。

コード枠、操作、編集ブロック、旧形式の互換処理は専用に実装しました。色分けの解析にはhighlight.js 11.12.0を同梱しています。閲覧時に外部CDNから読み込む構成ではなく、WordPressのサーバーから配信します。プラグイン本体はGPL-2.0-or-later、同梱のhighlight.jsはBSD-3-Clauseです。

コードを読んだら、動かしてみよう

読みやすいコード表示は、解説を読んで終わりにせず、自分で一行変えてみるきっかけにもなります。文字列や数字を変え、結果がどう変わるか試してみてください。ブラウザで試したい場合は、当サイトのオンラインコードエディタも利用できます。

プラグインのソース、更新履歴、配布ZIPはGitHubのTakinoko Code Studioにまとめています。ご自身のWordPressサイトでコード記事を書く際にも使ってみてください。

＼ 最新情報をチェック ／