WordPressのエディターは何をお使いでしょうか。
ブロックエディター? それとも旧エディター??
旧エディターで、なおかつテキストエディターを使っている方もまだまだいらっしゃると思います。
でもテキストエディターで記事を書く際、少し見にくいなって思うことはありませんか?
きれいに色分け表示されていたら見やすくなって、執筆作業もはかどりますね。
【HTML Editor Syntax Highlighter】は、テキストエディターをシンタックスハイライトするプラグイン。
HTMLコードをきれいに色分け表示するだけでなく、タグの自動補完などを行うこともできます。
こんな場合におススメ
- 投稿画面のテキストエディター(旧エディタ)を見やすくしたい
- テキストエディターをシンタックスハイライト表示するようにしたい
プラグインを使ってできること
- 投稿画面のテキストエディターをシンタックスハイライト表示する
- プラグイン・テーマエディターをシンタックスハイライト表示する
- 行番号を表示したり、タグの自動補完などを行うことができる
目次
インストール


インストール方法
- ダッシュボード > プラグイン > 新規追加 とクリックする
- HTML Editor Syntax Highlighterで検索する
- 今すぐインストールをクリック。インストール後有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
使用方法
ブロックエディターの場合
︙をクリックし、エディターをコードエディターに変更すると、シンタックスハイライト表示されるようになります。

旧エディターの場合
旧エディター(テキストエディター)の場合は、プラグインを有効化すると自動的にエディターがシンタックスハイライトされるようになります。

プラグイン・テーマエディターの場合
プラグイン・テーマエディターも、プラグインを有効化すると自動的にエディターがシンタックスハイライト表示されるようになります。
プラグインエディター

テーマエディター

【HTML Editor Syntax Highlighter】の設定
STEP
エディターの歯車アイコンをクリック
エディターのをクリックします。

STEP
項目の設定
をクリックすると、設定画面が開きます。

Theme | エディターのテーマ(デザイン)を選択 |
---|---|
Indent | インデントのサイズを『1~6』の中から選択 |
Line Wrap | 行を折り返し表示するかの切り替え |
Numbering | 行番号を表示するかの切り替え |
Font Size | フォントサイズを『8~20』の中から選択 |
Line Height | 行間を『1・1.25・1.5・1.75・2』の中から選択 |
more… | クリックすると詳細設定『Advanced Options』が開く |
STEP
Advanced Optionsの設定
『more…』をクリックすると【Advanced Options】が開き、高度なオプションを設定することができます。

Match Brackets | プログラムコードなどで対応する括弧をハイライト表示するかの選択 |
---|---|
Match Tags | 開始タグと閉じタグをハイライト表示するかの選択 |
Auto Close Tags | タグを自動補完するかの選択 |
Auto Close Brackets | 括弧を自動補完するかの選択 |
Code Folding | コードを折りたたみ表示するかの選択 |
Show Scrollbars | スクロールバーを表示するかの選択 |
Key Bindings | キーバインドの選択 |
動作確認環境
- バージョン 2.4.2
- WordPress 5.4.1
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。
まとめ
- 【HTML Editor Syntax Highlighter】は、テキストエディターとプラグイン・テーマエディターをシンタックスハイライトするプラグイン。
- コードをきれいに色分け表示するだけでなく、タグの自動補完も行うことができます。