ワードプレス(WordPress)の投稿ページをテキストエディタで編集するときにコードを見やすくしてくれるプラグイン HTML Editor Syntax Highlighter を解説します。
- HTML Editor Syntax Highlighterの使い方と詳細な設定方法がわかります
HTML Editor Syntax Highlighterで実現できること
HTML Editor Syntax Highlighterプラグインを入れると実現できることは次の1つです。
投稿ページや固定ページ等をテキストエディタで編集するときにHTMLコードを見やすくしてくれる
- テキストエディタの使い易さを改善してくれる機能が豊富
HTMLコードのタグの始まりと終わりを色分けてしてくれたり、タグの種類毎にカラフルに色分けしてくれるのでタグの視認性が著しく向上し、作業効率が上がるのが最大のメリットです。
HTML Editor Syntax Highlighterで表示したテキストエディタの画面HTML Editor Syntax Highlighterは旧エディターと新しいブロックエディターの両方のテキストエディタで利用できます
HTML Editor Syntax Highlighterのインストール方法
HTML Editor Syntax HighlighterプラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”HTML Editor Syntax Highlighter”と入力すると下に検索結果が表示されます
- ”HTML Editor Syntax Highlighter”の「今すぐインストール」ボタンをクリックします
“HTML Editor Syntax Highlighter”のインストール完了画面↑HTML Editor Syntax Highlighterのインストールが完了すると有効化ボタンが表示されるのでクリックします。
“HTML Editor Syntax Highlighter”を有効化すると表示される画面これでHTML Editor Syntax Highlighterのインストールと有効化は完了です。
HTML Editor Syntax Highlighterの設定と使い方
HTML Editor Syntax Highlighterをインストールして有効化すると機能は既に有効になっています。設定を変更をしないで初期設定の状態のままでもテキストエディタの視認性は向上します。
ですが、細かい設定項目を自分好みにカスタマイズすることで、より一層テキストエディタの使い易さが上がるので設定変更することをおすすめします。
HTML Editor Syntax Highlighterの設定
HTML Editor Syntax Highlighterの設定画面は投稿ページや固定ページ等をテキストエディタで編集したときにだけ変更できます。
つまりテキストエディタ内に設定項目が埋め込まれている形になっているので、他のプラグインのようにHTML Editor Syntax Highlighteプラグイン専用の設定画面は存在しません。
投稿ページの編集をテキストエディタで開いた画面↑投稿ページや固定ページの編集画面でテキストエディタを開くと、右側に歯車のアイコンがあるのでクリックします。
HTML Editor Syntax Highlighterの設定画面↑歯車のアイコンを押すとHTML Editor Syntax Highlighterの設定画面が開きます。
各項目の意味と選択できる範囲は次のとおりです。
カラーの変更(Theme)
HTML Editor Syntax Highlighterのカラーの変更(Theme)テキストエディタ全体のカラー設定を変更できます。数十種類あるテーマから選択できるので、見やすくて好みの色合いから選択することができます。
この設定項目は非常に重要です。なぜなら設定によってタグの認識のしやすさに大きな違いがあるからです。
カラー設定毎の背景の色は白と黒の2種類あり、黒の方が視認性は高いです。
下記のカラー設定は背景色が黒で、タグの種類によって色分けされ視認性が高くなるのでおすすめです。
- Material-palenight
- Material
- Monokai
インデントサイズ(Indent)
HTML Editor Syntax Highlighterのインデントサイズ(Indent)HTMLのインデント(字下げ)の幅を1～6の数値で指定して変更できます。
インデントとはHTMLタグの入れ子構造を見易くするための字下げのことです。
初期値の4から変更する必要はとくにありません。
折り返し方法(Line Wrap)
テキストエディタ内の1行を折り返して表示するか、折り返さないかの設定を変更することができます。
初期設定は折り返す設定になっています。
折り返さない設定にすると右側に長く表示されるのでスクロールして確認するのが大変になるので折り返す設定をおすすめします。
行番号(Numbering)
テキストエディタの左端に表示される行番号を表示するかしないかを設定することができます。
初期設定は行番号を表示する設定になっています。行番号があった方が使い易いので表示する設定をおすすめします。
文字サイズ(Font Size)
HTML Editor Syntax Highlighterの文字サイズ(Font Size)テキストエディタの文字サイズを8～20の数値で指定して変更することができます。
初期設定は13になっていて、少々見にくいので15にすることをおすすめします。
行間サイズ(Line Height)
HTML Editor Syntax Highlighterの行間サイズ(Line Height)行間のサイズを1～2の0.25刻みで変更できます。
初期設定は1.5になっています。初期設定が一番見やすいので変更する必要はありません。
高度なオプション
HTML Editor Syntax Highlighterの設定画面↑moreを押すと高度なオプションが表示されます。
HTML Editor Syntax Highlighterの設定画面の高度なオプション各項目の意味は次のとおりです。
Highlighting(ハイライト)
Auto Completion(オートコンプリート)
Editor Tools(エディターツール)
- スクロールバーを表示します※折り返し方法(Line Wrap)を折り返さない設定にしている場合は有効にします
Key Bindings(テキストエディタ毎の独自のショートカットキー割り当てに変更できます)
SublimeやVim、Emacsはテキストエディタの名称(プロダクト名)です。
つまり各テキストエディタに搭載されているオリジナルのショートカットキーに変更できるという設定項目です。
要は使い慣れたテキストエディタの操作方法でWordPressのテキストエディタを使うことができる機能です。
HTML Editor Syntax Highlighterのおすすめの設定
おすすめの一般設定と高度なオプションを載せておきます。
初期設定から変更する必要のある設定項目だけ判りやすいように太字にしています。
| 一般設定項目名 | おすすめの設定 |
|---|---|
| カラーの変更(Theme) | Material-palenight、Material、Monokai |
| インデントサイズ(Indent) | 4 |
| 折り返し方法(Line Wrap) | 折り返し「あり」 |
| 行番号(Numbering) | 行番号「あり」 |
| 文字サイズ(Font Size) | 15 |
| 行間サイズ(Line Height) | 1.5 |
| 高度なオプション項目名 | おすすめの設定 |
|---|---|
| Match Brackets(ブラケットを一致させる) | ☑有効 |
| Match Tags(タグを一致させる) | ☑有効 |
| Highlight Selection Matches(選択一致を強調表示) | ☑有効 |
| Auto Close Tags (タグを自動で閉じる) | ☑有効 |
| Auto Close Brackets (ブラケットを自動で閉じる) | ☑有効 |
| Code Folding(コード折り畳み) | ☑有効 |
| Show Scrollbars(スクロールバーを表示する) | ☑有効 |
| Key Bindings(テキストエディタ独自のキー割り当て) | Default |
HTML Editor Syntax Highlighterの設定変更時は他のプラグインのように設定を保存するボタンが存在しないため、設定項目を変更すればテキストエディタに即反映されます。
まとめ
HTML Editor Syntax Highlighterはテキストエディタの見やすさを改善してくれて記事編集のの生産性を高めてくれる非常に便利なプラグインです。
自分好みに細かくカスタマイズできるのでテキストエディタを頻繁に使う場合は必須のプラグインです。
テキストエディタの使い勝手を良くするプラグインのなかでもピカイチの使い易さと機能を誇っています。
テキストエディタをそれほど使わない場合でも、HTML Editor Syntax Highlighterプラグインを有効化するうえでのデメリットは殆どないので導入しておいても損はありません。
テキストエディタのツールバーにHTMLタグやコードの挿入ボタンを増やすことができる「AddQuicktag」プラグインも導入すると鬼に金棒状態なので「HTML Editor Syntax Highlighter」プラグインと併せて導入することをおすすめします。
「AddQuicktag」の詳しい解説はこちらの記事を参考にしてください↓
AddQuicktag ショートコードやHTMLタグ、定型文をワンクリックで入力できるプラグイン 設定方法と使い方
