ブログ運営

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

この記事について

WordPressでのソースコードの埋め込み方法で迷っている方向けの記事です。

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

こういった疑問にお答えします。

本記事の内容

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

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

ここでは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名を変更することで実現できます。自動的に言語を判別してハイライト表示してくれるので便利です。

対応言語185種類、テーマ90種類(2019年11月現在)というかなり豊富なスタイルから選択可能です。

Highlight.js

Prism.js

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

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

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

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」がおすすめです。

ソースコードハイライト表示ライブラリ「hightlight.js」をWordPressで導入する方法

この記事について WordPressで「hightlight.js」を導入する方法を具体的に紹介する記事です。 当ブログもWeb技術系の記事を書いていこうということで、今回を機にソースコードを記事内に ...

続きを見る

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

プロフィール

当ブログにアクセスしていただいてありがとうございます。 管理人の「ライ」と申します。

続きを見る

テスト
テスト2
テスト3
テスト4
テスト5
テスト6
テスト7
テスト8
テスト9

-ブログ運営

Copyright© HaveNots , 2020 All Rights Reserved.