Blogブログ

リッキー | 2022.6.28

使いづらいエディタから卒業！WordPressのプラグイン「HTML Editor Syntax Highlighter」を解説

CMS
wordpress

・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 から選択)