WordPress – ソースコードのシンタックスハイライトを行うSyntaxHighlighter Evolvedの使い方

投稿日：2020年6月14日

こんにちは、今日はWordPressでソースコードのシンタックスハイライトが行えるSyntaxHighlighter Evolvedの使い方についてまとめていきます。

Table of Contents

インストール方法

プラグイン > 新規追加からSyntaxHighlighter Evolvedで検索

または公式サイトからダウンロードします。
https://ja.wordpress.org/plugins/syntaxhighlighter/

使用方法

プラグインを有効化すると、ショートコードやブロックエディタのブロックが使用できるようになります。

ショートコードの場合

以下のように[[code]と[/code]]の間に修飾したいソースコードを記述します。

languageにはコードのフォーマットを指定します。

[[code language="html"]
<html>
  <head>
  </head>
  <body>
  </body>
</html>
[/code]]

ブロックエディタの場合

フォーマット > SyntaxHighlighter コードからSyntaxHighlighterのブロックを追加、そのブロックにコードを記述することで表示できます。

設定できる項目は以下の通りです。

コード言語	シンタックスハイライトのフォーマットを指定します。
行番号を表示	行番号を表示します。
最初の行番号	行番号が指定番号から始まります。
ハイライト行	指定行をハイライトします。
URL をクリック可能にする	コード内にURLがあった場合にクリック可能にします。
Enable edit mode on double click	ダブルクリックで編集モードに移行するか

対応フォーマット一覧

対応言語等は以下の通りです。

ActionScript

BASH / Shell

C / C++

Clojure

ColdFusion

CSS

Delphi

diff / patch

Erlang

Groovy

HTML / XHTML / XML / XSLT

Java

JavaFX

JavaScript

LaTeX

MATLAB

Objective-C

Perl

PHP

PowerShell

Python

Ruby / Ruby on Rails

Scala

SQL

Visual Basic

YAML

プレーンテキスト

以下のページにも一覧が記載されています。
https://wordpress.com/support/wordpress-editor/blocks/syntax-highlighter-code-block/2/

表示例

以下に一部コードの表示例を記載します。

HTML

<html>
  <head>
  </head>
  <body>
  </body>
</html>

C / C++

#include <stdio.h>

int main() {
  printf("Hello World!");
}