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.7.2
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。
まとめ
- 【HTML Editor Syntax Highlighter】は、テキストエディターとプラグイン・テーマエディターをシンタックスハイライトするプラグイン。
- コードをきれいに色分け表示するだけでなく、タグの自動補完も行うことができます。