【徹底比較】WordPress記事へのソースコード埋め込み方法紹介
ブログ運営者
「WordPressでソースコードを埋め込みたいけど、どんな方法がいいの？」
こういった悩みにお答えします。
本記事の内容
- ソースコードをWordPressで埋め込むための代表的な4つの方法
- ソースコード埋め込み方法の比較とおすすめの方法
こんにちは、mine（@mineblog7）です。
ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。
プログラミングの技術系ブログ記事を書こうとしたときに、プログラムのソースコード埋め込み表示が必要になることがあります。
ここではWordPressの記事内でのソースコード埋め込み方法を4種類のタイプに分けて紹介・比較します。
<pre>タグと<code>タグを使用する（HTMLタグのみ）
htmlで用意されているタグを使用する方法です。両方一緒に使うことをおすすめします。
<pre>タグ・・・ソースコードをスペース・改行を含めそのまま表示させるためのタグ<code>タグ・・・ソースコードであることを示すためのタグ
メリット
- 最も手軽に導入できる（何かをダウンロードしたり、記述しなくてもOK）
- 読み込みが最速
デメリット
- ソースコードの色分けができない分、シンタックスハイライトとしては微妙
- ソースコード色分けできないため言語が分かりづらい
- ソースコード記述時にHTML特殊文字（タグのカッコやダブルクオーテーションなど）を変換する必要がある
タグ表示例
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="dummy-block">
<p>dummy</p>
</div>
</body>
</html>プラグイン
WordPressではソースコードを埋め込み、美しく表示させるための無料プラグインが多数存在しています。初心者から上級者まで誰もが使える方法です。
メリット
- 手軽に導入できる（インストールして管理画面で設定できる）
- 知識がなくてもOK
- 最低限のハイライト表示の質を担保できる
デメリット
- 他のプラグインと干渉して不具合が起こる可能性がある
- 表示が重くなる可能性がある
- プラグインの更新が止まるとWordPressのバージョンアップに伴い、うまく動作しなくなる可能性がある
代表的なソースコード埋め込み表示プラグインを紹介します。Web上でも情報が多そうなものをピックアップしました。
Crayon Syntax Highlighter
インストールして有効するとWordPress編集画面のクイックタグに「Crayon」ボタンが追加されます。
「Crayon」ボタンをクリックして、ソースコード、テーマを選択して挿入するだけの簡単設計になっています。
対応言語65種類、テーマ58種類（2019年11月現在）から選択可。他にもフォントサイズや文字の太さ、マージンなどの細かい設定も用意されています。
最終更新が4年前となっており、最新のWordPressのバージョンで検証されていないのでそこが少し気になるところです。
SyntaxHighlighter Evolved
インストールし有効化すると、ソースコード表示用のショートコードが使用可能になります。例えばPHPのコードを表示させたい場合は、[php]ここにコードを入れます[/php]のような形でショートコードを入れるとハイライト表示することができます。
対応言語23種類、テーマ7種類（2019年11月現在）から選択可。行番号を表示したり、行ごとにハイライトさせるかどうかを設定できます。
更新も定期的に行われているので、比較的安心です。
JavaScriptライブラリ
JavaScriptライブラリ（ダウンロードもしくはCDN）を使用した少しHTML、CSS、JavaScriptについて知識がある人向けの方法です。
メリット
- 読み込みが早い
- ハイライト表示に多言語対応している
- CDNを使用すればダウンロードやインストール作業が不要
デメリット
- 少しHTML、CSS、JavaScriptの知識が必要なので、導入が少し面倒かもしれない
- CDN（外部サーバーを読み込む）を使用する場合、CDNが障害でダウンした場合は、コードのハイライト表示ができなくなる
- ソースコード記述時にHTML特殊文字（タグのカッコやダブルクオーテーションなど）を変換する必要がある
代表的なソースコード埋め込み表示JavaScriptライブラリを紹介します。
Highlight.js
CDNもしくは、CSS・JSファイルをダウンロードして読み込ませて使用します。
<pre>タグと<code>タグを使用し、その中に表示させたいソースコードを記述します。
スタイルの変更は、読み込ませるCSS名を変更することで実現できます。
自動的に言語を判別してハイライト表示してくれるので便利です。
対応言語189種類、テーマ94種類（2020年6月現在）というかなり豊富なスタイルから選択可能です。
Prism.js
CDNもしくは、CSS・JSファイルをダウンロードして読み込ませて使用します。
<pre>タグと<code>タグを使用し、その中に表示させたいソースコードを記述します。
スタイルの変更や、言語の変更も可能で、行番号を表示したりするプラグイン機能もついています。
対応言語219種類、テーマ8種類（2020年6月現在）から選択可能です。
外部Webサービスを利用する
別のWebサービスに使用してソースコードを登録し、それをWordPress記事内で読み込む方法です。
メリット
- 手軽で楽
- ソースコードをバージョン管理できる（Gist）
デメリット
- サービスに登録する必要があるので面倒
- サービスがダウンするとソースコードが表示できない
- 表示スタイルの種類が少ない（配色のパターンが少ない）
代表的なソースコード埋め込みサービスを紹介します。
Gist（GitHubの機能）
外部サービス「GitHub」に登録後、表示させたいソースコードを保存できます。
記事に埋め込むためのコード（スクリプトタグ）を出力できるので、それを記事内にコピペするだけでOKです。
加えて、ソースコードのバージョン管理ができます。
CODE PEN
外部サービス「CODE PEN」に登録後、表示させたいHTML、CSS、JavaScriptのソースコードを入力して保存できます。
記事に埋め込むためのコードを出力できるので、それを記事内にコピペするだけでOKです。
ソースコードと一緒に動作デモも表示されるので便利です。
ただし、HTML、CSS、JavaScriptのみ対応なのでご注意を。
ソースコード埋め込み方法比較表
4タイプのソースコード埋め込み方法を、「読込速度、導入の手軽さ、スタイル種類」で比較しました。
| 埋め込み方法 | 読込み速度 | 導入の手軽さ | スタイル種類 |
| HTMLタグのみ | ◎ | ◎ | × |
| プラグイン | △ | ○ | ○ |
| JavaScriptライブラリ | ○ | △ | ◎ |
| 外部Webサービス | ○ | ○ | △ |
総合的に見て、バランスがいいのはJavaScriptライブラリでしょうか。
個人的にはソースコード埋め込みには「Highlight.js」がおすすめです。
どの方法を選択するかは、最終的には重視することや個人的な好みによって決まります。あくまでこの記事は参考程度に見ていただいて、ぜひ色々調べて自分のシチュエーションに合った方法を選んでください。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の４点減点法」で面接に挑んだ結果