Web技術系中心に割と何でも更新中

【徹底比較】WordPress記事へのソースコード埋め込み方法紹介

Programming Web

Web制作者

ブログ運営者
「WordPressでソースコードを埋め込みたいけど、どんな方法がいいの?」

こういった悩みにお答えします。

本記事の内容

  • ソースコードをWordPressで埋め込むための代表的な4つの方法
  • ソースコード埋め込み方法の比較とおすすめの方法

こんにちは、mine(@mineblog7)です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

プログラミングの技術系ブログ記事を書こうとしたときに、プログラムのソースコード埋め込み表示が必要になることがあります。

ここではWordPressの記事内でのソースコード埋め込み方法を4種類のタイプに分けて紹介・比較します。

<pre>タグと<code>タグを使用する(HTMLタグのみ)

タグのみ

htmlで用意されているタグを使用する方法です。両方一緒に使うことをおすすめします。

  • <pre>タグ・・・ソースコードをスペース・改行を含めそのまま表示させるためのタグ
  • <code>タグ・・・ソースコードであることを示すためのタグ

メリット

  • 最も手軽に導入できる(何かをダウンロードしたり、記述しなくてもOK)
  • 読み込みが最速

デメリット

  • ソースコードの色分けができない分、シンタックスハイライトとしては微妙
  • ソースコード色分けできないため言語が分かりづらい
  • ソースコード記述時にHTML特殊文字(タグのカッコやダブルクオーテーションなど)を変換する必要がある

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

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月現在)というかなり豊富なスタイルから選択可能です。

» Highlight.jsを詳しく見る

Prism.js

CDNもしくは、CSS・JSファイルをダウンロードして読み込ませて使用します。

<pre>タグと<code>タグを使用し、その中に表示させたいソースコードを記述します。
スタイルの変更や、言語の変更も可能で、行番号を表示したりするプラグイン機能もついています。

対応言語219種類、テーマ8種類(2020年6月現在)から選択可能です。

» Prism.jsを詳しく見る

外部Webサービスを利用する

別のWebサービスに使用してソースコードを登録し、それをWordPress記事内で読み込む方法です。

メリット

  • 手軽で楽
  • ソースコードをバージョン管理できる(Gist)

デメリット

  • サービスに登録する必要があるので面倒
  • サービスがダウンするとソースコードが表示できない
  • 表示スタイルの種類が少ない(配色のパターンが少ない)

代表的なソースコード埋め込みサービスを紹介します。

Gist(GitHubの機能)

外部サービス「GitHub」に登録後、表示させたいソースコードを保存できます。
記事に埋め込むためのコード(スクリプトタグ)を出力できるので、それを記事内にコピペするだけでOKです。

加えて、ソースコードのバージョン管理ができます

» Gistを詳しく見る

CODE PEN

外部サービス「CODE PEN」に登録後、表示させたいHTML、CSS、JavaScriptのソースコードを入力して保存できます。

記事に埋め込むためのコードを出力できるので、それを記事内にコピペするだけでOKです。

ソースコードと一緒に動作デモも表示されるので便利です。
ただし、HTML、CSS、JavaScriptのみ対応なのでご注意を。

» CODE PENを詳しく見る

ソースコード埋め込み方法比較表

4タイプのソースコード埋め込み方法を、「読込速度、導入の手軽さ、スタイル種類」で比較しました。

埋め込み方法 読込み速度 導入の手軽さ スタイル種類
HTMLタグのみ ×
プラグイン
JavaScriptライブラリ
外部Webサービス

総合的に見て、バランスがいいのはJavaScriptライブラリでしょうか。

個人的にはソースコード埋め込みには「Highlight.js」がおすすめです。

どの方法を選択するかは、最終的には重視することや個人的な好みによって決まります。あくまでこの記事は参考程度に見ていただいて、ぜひ色々調べて自分のシチュエーションに合った方法を選んでください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果