SyntaxHighlighter Evolved

SyntaxHighlighter Evolved（シンタックスハイライター・イボルブド）は、記事の中でソースコードを綺麗に表示できるWordPressプラグインです。プラグインで動作する「Syntax Highlighter」です。

クラシックエディタ・ブロックエディタの両方に対応しています。
ブロックエディタを利用する場合は「Syntax Highlighter」のブロックを利用できます。

クラシックエディタを利用する場合は、専用のショートコードを利用してソースコードを記述します。

ブログの記事の中で、HTMLやプログラミングのソースコードを解説する機会が多い方は、このプラグインを活用しましょう。

はじめに

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

  • プラグインで動作する Syntax Highlighter（シンタックス・ハイライター）です。
  • 記事の中でソースコードを綺麗に表示できる。
  • クラシックエディタを利用する場合は、専用のショートコードの中にソースコードを記述します。
  • ブロックエディタを利用する場合は専用のブロックが用意されている。
  • エディタの外観を変更できるデザインスキンが複数あり、好きなデザインを選べる。
  • プラグインの管理画面が日本語化されているのでわかりやすい。

見本（画像）

下記は「SyntaxHighlighter Evolved」のスクリーンショット画像です。
初期設定のスキンでコードを表示しています。
記事にソースコードを綺麗に表示できます。

SyntaxHighlighter Evolved

信頼性

プラグインが定期的にアップデートされており、安定的に保守が行われています。
サポートフォーラムでも開発者が質問に回答しています。
プラグインの保守は適切に行われているようです。

確認日：2022.01.22

確認できた内容
  • 定期的なアップデートの実績
  • サポートフォーラムの評判
  • プラグインの評価
  • プラグインの利用者数
広告

インストール方法

SyntaxHighlighter Evolved

管理画面から検索してインストールして下さい。
もしくは「wordpress.org」からダウンロードし、アップロードしてインストールして下さい。

  1. WP管理画面 ＞ プラグイン ＞ 新規追加 ＞「SyntaxHighlighter Evolved」で検索
  2. 「wordpress.org」からダウンロード

クラシックエディタでの使い方

クラシックエディタを利用する場合は、専用のショートコードの中にソースコードを記述して利用します。様々なショートコードのパラメーターに対応しています。

ショートコードの使い方は簡単です。テキストエディタ（HTMLモード）で、下記のようにショートコードとパラメーターを組み合わせて記述します。

実際に自分で試して使ってみましょう。

ショートコードの基本形

ショートコードの記述方法は、「code」または「sourcecode」のショートコードの中に「language」または「lang」で言語の種類を指定します。

下記は言語にHTMLを指定した例です。

ショートコードとパラメーターの組み合わせ例

下記のようにパラメーターを組み合わせて記述することもできます。

上記の場合は、言語をCSS、見出しの文言を指定、10行目をハイライトにしています。

使用上の注意点

クラシックエディタのテキストエディタ（HTMLモード）を利用して記事を編集する際は、テキストエディタを利用する必要があります。

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

利用できるパラメーターについて

利用できるパラメーターについては、プラグインの管理画面の下の方に説明が記載されていますので、そちらを参照して下さい。

広告

ブロックエディタでの使い方

ブロックエディタを利用する場合は、プラグインを有効化すると「Syntax Highlighter」のブロックが利用可能になります。

ブロック追加画面

ブロックエディタのブロック挿入画面から「Syntax Highlighter」のブロックを選択できます。

ブロック追加画面

ブロック編集画面

ブロックエディタの場合は、ブロックにソースコードを入力します。
そして、右側にあるブロックの設定項目を調整します。

ちなみに、「Syntax Highlighter」は記事の方に適用されます。エディタの画面には適用されません。

ブロック編集画面

プラグインの設定

管理画面の場所

プラグインの管理画面は下記の場所にあります。

WordPress管理画面 ＞ 設定 ＞ SyntaxHighlighter

プラグインの管理画面

このプラグインの管理画面は日本語化されています。この記事で説明は省略します。
初期設定のままでも利用できますが、必要に応じて設定を変更して下さい。

SyntaxHighlighter

SyntaxHighlighterのバージョン

SyntaxHighlighterのバージョンは「3.x」がお勧めです。
テーマでスキンの変更もできます。

コード言語

コードを表示する際は、下記の言語に対応しています。
ショートコードのパラメーターで「language」または「lang」で指定する言語のことです。
ブロックエディタのブロックでも言語を指定可能です。

  1. actionscript3
  2. bash
  3. clojure
  4. coldfusion
  5. cpp
  6. csharp
  7. css
  8. delphi
  9. erlang
  10. fsharp
  11. diff
  12. groovy
  13. html
  14. javascript
  15. java
  16. javafx
  17. matlab (keywords only)
  18. objc
  19. perl
  20. php
  21. text
  22. powershell
  23. python
  24. r
  25. ruby
  26. scala
  27. sql
  28. vb
  29. xml

まとめ

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

ブログの記事の中でソースコードを表示して解説する機会がある人に役に立つプラグインです。

Webデザイナー・プログラマーの方など、ブログの記事の中でソースコードを解説する際に利用すると良いかもしれません。