SyntaxHighlighter Evolved設定方法(記事内にソースコードを埋め込むプラグイン)

※SyntaxHighlighter Evolved表示例は下記↓

WordPress5.0が2018/12/6にリリースされてついにGutenbergがやってきましたね!プラグインやテーマの互換性を気にしている方は、まだ WordPress5.0にしていないか、あるいは旧エディタのプラグイン「Classic Editor」をインストールして使っていることでしょう。

しかし、いつかはGutenbergになるのだし慣れておかないとな。ということでGutenbergを触っている昨今です。今までと使い勝手が違うので、まだ少し戸惑いながらエディタを使っているのですが、その中でも今回私をやや困らせてくれたソースコードの表示方法についてをメモがてら残しておきます。

1 SyntaxHighlighter Evolvedとは
2 このプラグインが優れている点
3 使用上の注意
4 実際の動作見本
5 対応言語
6 インストール方法
7 Syntax Highlighter Evolvedの設定

SyntaxHighlighter Evolvedとは

SyntaxHighlighter Evolvedは、記事の中でソースコードを綺麗に表示できる WordPressプラグインです。

プラグインで動作するSyntax Highlighter(シンタックス・ハイライター) です。

使い方は簡単です。ショートコードを利用してソースコードを記述します。ブログの記事の中で、HTMLやプログラミングのソースコードを解説する機会が多い方は、このプラグインを活用すると便利です。

このプラグインが優れている点

5つの優れている点

●記事の中でエディタのようにソースコードを綺麗に表示できる。
●WordPressプラグインで動作する「Syntax Highlighter」です。
●テーマ(デザインスキン)が複数あり、好きなデザインを選べる。
●様々なショートコードのパラメーターに対応している。
●プラグインの管理画面が日本語化されているのでわかりやすい。

使用上の注意

このプラグインを利用して記事を編集する際は、テキストエディタ(HTMLモード)を利用する必要があります。

ビジュアルエディタ(テキストモード)に切り替えると、ソースコードの一部が除去・変更される場合があります。

実際の動作見本

下記は、SyntaxHighlighter EvolvedのVer.3.xが実際に動作する見本です。下記の様に記事上にソースコードを綺麗に表示することができます。

HTML表示例

CSS表示例

対応言語

SyntaxHighlighter Evolvedは、下記の言語に対応しています。ショートコードのパラメーターのlanguage (lang)で指定する言語のことです。

①actionscript3
② bash
③clojure
④coldfusion
⑤cpp
⑥csharp
⑦css
⑧delphi
⑨erlang
⑩fsharp
⑪diff
⑫groovy
⑬html
⑭javascript
⑮java
⑯javafx
⑰matlab (keywords only)
⑱objc
⑲perl
⑳php
㉑text
㉒powershell
㉓python
㉔r
㉕ruby
㉖scala
㉗sql
㉘vb
㉙xml