WordPressのデフォルトテキストエディタを使っていると、シンタックスハイライトされていないので、結構見づらかったりすることがありませんか？ 何も色分けされていないテキストなので、タグを探すのも見づらくて大変ですね。そんな悩みを解決するプラグインが「HTML Editor Syntax Highlighter」です。WordPressで記事を書く際に、テキストエディタを使ってHTMLコードを書いている方には大変便利なプラグインです。
※Ver.2.3.0よりGutenbergのコードエディタに対応したようです。
プラグインのインストールと有効化
下記リンクページはJetpackをインストールし有効化するまでの手順を記載したページです。
「Jetpack」を「 HTML Editor Syntax Highlighter 」と置き換えてプラグインのインストールをしてください。
WordPressプラグインインストールの超基本手順について
HTML Editor Syntax Highlighterでの表示
通常WordPressのテキストエディタでは、以下のような編集画面になります。なかなか見づらいですね…
しかし、「HTML Editor Syntax Highlighter」を使うと…
下図のように見やすくハイライトされた編集画面になります。
HTML Editor Syntax Highlighterの設定
「HTML Editor Syntax Highlighter」をインストール後、記事編集画面や固定ページ編集画面などのテキストエディタ（HTMLエディタ）で使用します。なので、各設定は記事編集画面や固定ページ編集画面のテキストエディタで行います。
設定項目を開くには、下図テキストエディタ画面の歯車アイコンをクリックします。
すると各種設定項目が開きます。この設定項目で自分の好きなようにカスタマイズできます。
設定項目「Theme」
Themeの項目ではSyntax Highlighterの見た目を変更できます。この項目はご自分が見やすいテーマを選択すると良いでしょう。
設定項目「Indent」
Tabボタンを使った時などの、インデントサイズを設定します。このサイズもお好みで…
設定項目「Line Wrap」
テキストエディタの編集エリアより行の文字数がはみ出た場合、折り返すか折り返さないかの設定ができます。この設定もお好みで構いませんが、個人的には折り返した方が便利な気がします。
設定項目「Numbering」
テキストエディタの行番号を表示するかしないかの設定になります。個人的には行番号があった方が見やすいかも…
設定項目「Font Size」
テキストエディタのフォントサイズを指定します。これもご自分が使用していて見やすいサイズを設定すると良いでしょう。
設定項目「Line Height」
行間のサイズを指定します。これも使用していて見やすいサイズを設定すると良いでしょう。
その他設定
「more…」をクリックすると更に詳細な設定が可能です。
「more…」をクリックすると以下のような設定ウインドウが開きます。適宜チェックを入れお好みの設定を行ってください。
| Match Brackets | 対応する括弧をハイライトする |
| Match Tags | 対応するタグをハイライトする |
| Highlight Selection Matches | 選択している単語と同じ単語をハイライトする |
| Auto Close Tags | </を入力すると自動でタグを補完する |
| Auto Close Brackets | 括弧を入力すると自動で閉じ括弧を補完する |
| Code Folding | コードを折り畳めるようにする |
| Show Scrollbars | スクロールバーを表示する |
| AuKey Bindings | キーを扱い方を設定する |
まとめ
「HTML Editor Syntax Highlighter」を使うと、テキストエディタがハイライトされかなり見やすくなるので、HTMLコードを直接入力して記事を編集する方には、重宝するプラグインではないでしょうか。上手く活用すれば、記事編集がかなり効率化されるかもしれませんね