WordPressのエディターは何をお使いでしょうか。
ブロックエディター？ それとクラシックエディター？？
クラシックエディターで、なおかつテキストエディターを使っている方もまだまだいらっしゃると思います。
でもテキストエディターで記事を書く際、少し見にくいなって思うことはありませんか？
きれいに色分け表示されていたら見やすくなって、執筆作業もはかどりますね。
【HTML Editor Syntax Highlighter】は、テキストエディター（旧エディター）をシンタックスハイライトするプラグイン。
HTMLコードをきれいに色分け表示するだけでなく、タグの自動補完などを行うこともできます。
こんな場合におススメ
- 投稿画面のテキストエディター（旧エディタ）を見やすくしたい
- テキストエディター（旧エディタ）をシンタックスハイライト表示するようにしたい
プラグインを使ってできること
- 投稿画面のテキストエディター（旧エディタ）をシンタックスハイライト表示する
- 行番号を表示したり、タグの自動補完などを行うことができる
スポンサーリンク
目次
インストール
- 管理画面から プラグイン > 新規追加 とクリックする
- “HTML Editor Syntax Highlighter“で検索する
- “今すぐインストール”をクリック。インストール後、有効化する
または、配布サイトからダウンロードして、インストール。
HTML Editor Syntax Highlighter – WordPress プラグイン | WordPress.org
手動でインストールする方法はコチラ
関連記事
WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする […]
使用方法
プラグインを有効化すると、旧エディター（テキストエディタ）の場合、自動的にエディタがシンタックスハイライトするようになります。
ブロックエディター（Gutenberg）の場合
ブロックエディター（Gutenberg）の場合、エディタをコードエディターに変更すると、シンタックスハイライト表示されるようになります。
設定
歯車アイコンをクリックすると、設定画面が開きます。
基本設定
| Theme | エディターのテーマ（デザイン）を選択 |
|---|---|
| Indent | インデントのサイズを『1～6』の中から選択 |
| Line Wrap | 行を折り返し表示するかの切り替え |
| Numbering | 行番号を表示するかの切り替え |
| Font Size | フォントサイズを『8～20』の中から選択 |
| Line Height | 行間を『1・1.25・1.5・1.75・2』の中から選択 |
| more… | クリックすると詳細設定『Advanced Options』が開く |
Advanced Options
Highlighting
| Match Brackets | プログラムコードなどで対応する括弧をハイライト表示するかの選択 |
|---|---|
| Match Tags | 開始タグと閉じタグをハイライト表示するかの選択 |
| Highlight Selection Matches | 選択した単語と同じ単語をハイライト表示するかの選択 |
Auto Completion
| Auto Close Tags | タグを自動補完するかの選択 |
|---|---|
| Auto Close Brackets | 括弧を自動補完するかの選択 |
Editor Tools
| Code Folding | コードを折りたたみ表示するかの選択 |
|---|---|
| Show Scrollbars | スクロールバーを表示するかの選択 |
Key Bindings
| Key Bindings | キーバインドの選択 Default：デフォルト Sublime Vim Emacs |
|---|
動作確認環境
- バージョン 2.4.2
- WordPress 5.2.3
まとめ
- 【HTML Editor Syntax Highlighter】は、テキストエディターをシンタックスハイライトするプラグイン。
- HTMLコードをきれいに色分け表示するだけでなく、タグの自動補完も行うことができます。