WordPressの記事上でコードを色分け表示する。SyntaxHighlighter Evolvedの使い方。PHP/JS/HTML/CSSコードなど。

WordPressで記事内にそのままサンプルコードを貼り付ると、表示が崩れてしまいます。そんなときに便利なのが、「SyntaxHighlighter Evolved」 というプラグインです。

本記事では、SyntaxHighlighter Evolvedの インストール から 使い方 を説明します。

※2025/03/18時点でコピペボタンが表示されない不具合あり。バージョン3.7.2
現在はこちらを使用中↓

SyntaxHighlighter Evolvedプラグインとは？

▼

SyntaxHighlighter Evolved は、WordPressの投稿内にプログラムコードを美しく表示するためのプラグイン。
「シンタックスハイライトを適用したい」「コードを見やすく表示したい」「コピペボタンの実装」などが可能です。

特徴：

• シンタックスハイライト（色付きのコード表示）
• 行番号の表示
• コピーボタンの追加
• 多くのプログラミング言語に対応
• ショートコードを使うだけで簡単に実装

公式サイト：SyntaxHighlighter Evolved – WordPress plugin | WordPress.org
https://wordpress.org/plugins/syntaxhighlighter/

インストール方法

▲ ▼

1. WordPressの管理画面にログイン。
2. [プラグイン] → [新規追加] に移動。
3. 検索窓に SyntaxHighlighter Evolved と入力。
4. 「今すぐインストール」ボタンをクリック。
5. インストール完了後、「有効化」をクリック。

有効化すると、プラグイン名の下に「設定」があらわれる。

基本的な使い方（ショートコードで利用）

▲ ▼

SyntaxHighlighter Evolvedは、ショートコード を使ってコードを簡単に色分け表示できます。

PHPコードを表示する場合

以下のように、記事内に記述してください。

[php]
<?php
    echo "Hello, World!";
?>
[/php]

これで、記事を公開すると シンタックスハイライト付きのPHPコード が表示されます！

HTMLコードを表示する場合

[html]
<div class="container">
    <p>Hello, World!</p>
</div>
[/html]

このように、言語名をショートコードの中に入れるだけで適用されます。

---

設定をカスタマイズする

▲ ▼

プラグインを有効化すると、プラグイン画面の[設定] → [SyntaxHighlighter] からカスタマイズが可能です。

変更できる主な項目：

• テーマの変更（Dark, Light, Classic など）
• 行番号の表示/非表示
• ハイライトする行の指定
• 使用バージョンの指定

例えば、行番号を非表示にしたい場合は、設定画面で 「Show Line Numbers」 のチェックを外すだけでOKです。

---

オプションや応用テクニック

▲ ▼

特定の行をハイライトする

以下のように highlight="1,3" を追加すると、1行目と3行目がハイライトされます。

[php highlight="1,3"]
<?php
    echo "Hello, World!";
    echo "This is a test.";
    echo "Highlighted line!";
?>
[/php]

コードの折りたたみを有効にする

長いコードを 折りたたみ表示 したい場合は、collapse="true" を追加。

[php collapse="true"]
<?php
    echo "This code is collapsed by default.";
?>
[/php]

これにより、デフォルトでコードが折りたたまれ、「+」ボタンで展開できるようになります。

ショートコードパラメータ一覧

利用可能な言語やオプション。

• lang or language —  PHPでの使用例：[php]code[/php].
• 使用可能なコード: as3, actionscript3, arduino, bash, shell, coldfusion, cf, clojure, clj, cpp, c, c-sharp, csharp, css, delphi, pas, pascal, diff, patch, erl, erlang, fsharp, go, golang, groovy, haskell, java, jfx, javafx, js, jscript, javascript, latex, tex, matlab, matlabkey, objc, obj-c, perl, pl, php, plain, text, ps, powershell, py, python, r, splus, rails, rb, ror, ruby, scala, sql, swift, vb, vbnet, xml, xhtml, xslt, html, yaml, yml.
• autolinks — 自動リンクの有効・無効
• classname — コードボックスに追加するCSSのclass
• collapse — コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
• firstline — 行番号の出力の際に、最初の行の番号を表す数値
• gutter — 左側に行番号を配置するかどうか
• highlight — ハイライトする行番号のカンマ区切りのリスト。範囲を指定することもできます。 例: 2,5-10,12
• htmlscript — HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
• light — 行番号やツールバーを無効にする軽い表示モードのオン・オフ
• padlinenumbers — 行番号の余白。有効な値は、 <code>false</code>(余白なし), <code>true</code> (自動)、数値(余白)
• title （v3のみ） — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
• toolbar — ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
• wraplines (v2のみ) — 折り返しの有効・無効
• quickcode — ダブルクリックで編集モードを有効

引数指定の例:

• [php]ここにPHPコードを入れます[/php]
• [css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="example-filename.php"]ここにコードを入れます[/css]
• [code lang="js"]ここにコードを入れます[/code]
• [sourcecode language="plain"]ここにコードを入れます[/sourcecode]

---

SyntaxHighlighter Evolved　メモ・不具合

▲

ブロックエディタとしてのブロック化はされておらず、ショートコード形式での追加のみ対応。

右上のツールメニュー(コピペボタンなど)が表示されない不具合あり。(2025/03/18 バージョン3.7.2)
対処法はこちらが参考になります。↓
Syntax Highlighter Evolved 「クリップボードにコピー」ボタンを表示する方法｜WPプラグイン | EVMクリエイト
https://evm-label.com/2015/10/wp_syntaxhighlighter02/

しっくりこなかったので、現在はブロックエディタ対応のこちらを使用↓
Highlighting Code Block – WordPress プラグイン | WordPress.org 日本語
https://ja.wordpress.org/plugins/highlighting-code-block/