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

「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/

この記事を書いた人

リッキー デザイナー

関連記事

Recommend愛されているブログ