
・WordPressでHTMLを編集するとき、デフォルトのエディタが使いづらい
・コードが間違っている箇所を探すのに見づらい
WordPressのHTMLを修正する場合は「テキストエディタ」を使用しますが、
この標準のエディタが見づらい・使いにくいと思った方は多いはず・・・
自分がそうでした。
今回は、そんな見づらい・使いにくいといったお悩みを解決してくれる、
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」の設定方法
プラグインの設定内容
プラグインの設定を操作したい場合はテキストエディタ右上にある「歯車アイコン」をクリック


・Theme
テキストエディタのテーマを変更
・Indent
HTMLのインデント(字下げ)を指定
・Line Wrap
エディタの折り返しを指定
・Numbering
エディタの行番号の表示を指定
・Font Size
エディタの文字サイズを指定
・Line Height
エディタの行間を数値で指定
さらに詳細な設定をする場合
さらに詳細な設定をする場合は、「more…」をクリック


・Match Brackets
エディタが対応する括弧『(』の開始と終了をハイライト表示
・Match Tags
エディタが対応しているHTMLの開始タグと終了タグをハイライト表示
・Highlight Selection Matches
選択している単語と同じ単語をハイライト
・Auto Close Tags
エディタで入力したHTMLのタグを自動で閉じる
・Auto Close Brackets
エディターで入力した括弧『(』を自動で閉じる
・Code Folding
HTMLのコードを階層でたためる
・Show Scrollbars
エディターにスクロールバーを表示
・Key Bindings
ショートカットキーの配列を選択
(Sblime/Vim/Emacs から選択)
「HTML Editor Syntax Highlighter」のオススメ詳細設定
設定できることが多くてわかりにくい!って方の為に自分の独断と偏見で「これだけはしておいたほうがいい設定」をご紹介します!
Match Tags

開始タグもしくは終了タグをクリックすると、セットのタグにも背景色がつきます。
Auto Close Tags

自動で終了タグが入力されます。
Code Folding

コードの前に▼が表示されます。
この他にも設定はかなり詳細に設定することができるので、自分好みにカスタマイズしてみてください!
まとめ
今回はWordPressのプラグイン「HTML Editor Syntax Highlighter」について紹介していきました!
WordPressのエディタを利用して、テキスト・HTML編集をしていている方にはオススメのプラグインです!
エディタに表示するHTML・CSS・JSなどのコードを見やすくするだけで作業効率は格段にあがると思います。
以上、「使いづらいエディタから卒業!WordPressのプラグイン「HTML Editor Syntax Highlighter」を解説!」でした。
最後まで読んでいただきありがとうございました。

株式会社TORATはクリエイティブから様々な業務まで
TORATを一緒に盛り上げて頂けるメンバ―を募集しております!
▽採用情報の詳細ついてはこちらから▽
https://www.torat.jp/recruit/