WordPressでブログを書いていると、HTMLやCSSのコードをそのまま記事に載せたい場面が出てきます。ところがエディタにベタ書きすると、ただ黒い文字が並ぶだけで読みづらいんですよね。
ブロックエディタにも「コード」ブロックは用意されていますが、これは等幅フォントで囲ってくれるだけで、色分け（シンタックスハイライト）まではしてくれません。コードを色付きで見やすく表示したいなら、やはり専用のプラグインを入れるのが一番手っ取り早いです。
この記事では、当ブログでも実際に使っている「APH Prism Syntax Highlighter」というプラグインで、ソースコードを綺麗に表示する方法を紹介します。設定項目が少なく動作も軽いので、初心者の方でも迷わず導入できると思います。
たとえば、こんな感じで表示できます。
.text1 {
margin-top: 20px;
padding: 10px;
color: #000;
font-size: 16px;
}「APH Prism Syntax Highlighter」のインストール方法
それでは、まずはWordPressに「APH Prism Syntax Highlighter」をインストールしていきます。
1.WordPressの管理画面を開き、プラグインから新規追加ボタンをクリックします。
2.キーワード検索から「APH Prism Syntax Highlighter」を検索し、「今すぐインストール」ボタンをクリックします。
3.インストールが終わったら有効化ボタンをクリックし、プラグインを有効化します。
4.これでインストールは完了です。
「APH Prism Syntax Highlighter」の設定方法
インストールが完了したら、続いて設定を見ていきます。
デフォルトのままでも十分使えますが、せっかくなので自分好みにカスタマイズしておきましょう。
1.プラグイン一覧から「APH Prism Syntax Highlighter」を探し、プラグイン名の下にあるSettingsをクリックします。
2.設定画面が開くので、ここから各項目を変更していきます。
「APH Prism Syntax Highlighter」の設定画面を日本語で解説
設定画面は英語表記なので、はじめは少し分かりづらいかもしれません。各項目が何をするものなのか、ひとつずつ解説していきます。
1.言語設定
Choose languagesで、記事に載せる予定の言語を選んでおきます。
Add Languageボタンをクリックすると、言語を追加できます。
各言語の横にある×ボタンで個別に削除でき、Remove Allボタンを押すとすべての言語をまとめて削除できます。
2.ドロップダウンメニューのデフォルト言語
Default Languageで、コードエディタのドロップダウンメニューに最初から選ばれている言語を変更できます。よく使う言語にしておくと、毎回選び直す手間が減ります。
3.テーマの変更
Themeで、コードを表示するときの配色テーマを変更できます。文字色や背景色がガラッと変わる部分なので、まずはここだけでも好みのものに設定しておくのがおすすめです。
選べるテーマの一覧は、この記事の後半でまとめて紹介しています。
4.オプション設定
Optionsで、表示まわりの細かいオプションを切り替えられます。
上から順に、
1.行番号を表示する
2.コード内のURLをクリック可能にする
3.コードのタイトルとして言語名を表示する
4.タブや改行などの隠し文字を表示する
という4つの項目です。
5.開始行番号
Starting Line Numberで、行番号の開始番号を変更できます。これは4のオプションで「行番号を表示」にチェックを入れている場合のみ有効です。
6.コード表示エリアの高さの上限
Max Heightで、コードを表示するエリアの高さの上限を指定できます。ここで決めた高さより長いコードを載せると、スクロールバーが表示される仕組みです。初期値は480pxで、基本はこのままで問題ありません。
7.CSSの追加
表示エリアに独自のCSSをあてたいときは、Additional CSSをYESに設定します。エリアのクラス名はaphph-containerなので、これを目印にスタイルを書けます。
8.ブロックコンテナにクラスを追加
Add global classで、コードを表示するブロックに任意のクラスを追加できます。テーマ側のスタイルと連携させたいときに便利です。
「APH Prism Syntax Highlighter」のテーマ一覧
最後に、選べる配色テーマを並べて紹介します。同じコードでも雰囲気がかなり変わるので、ブログのデザインに合うものを選んでみてください。
Default（初期設定のテーマ）
Dark
Funky
Okaidia
Twilight
Coy
Solarized Light
Tomorrow Night
まとめ
当ブログでも「APH Prism Syntax Highlighter」を使っていますが、導入も設定も簡単で、今のところ大きな不満なく使えています。コードが色付きで表示されるだけで記事の見やすさはぐっと上がるので、技術系の内容を書くなら入れておいて損はないプラグインだと思います。
ソースコードを表示するプラグインは他にもいくつかあるので、表示の好みやお使いのテーマとの相性で選んでみるとよいと思います。
当ブログで使っている他のプラグインは【2025年最新版】WordPress初心者におすすめの無料プラグイン5選でも紹介しているので、あわせて読んでみてください。
