コーダー歓喜！WordPressのエディタ編集が便利になるプラグイン「HTML Editor Syntax Highlighter」を紹介

2018年1月10日2021年11月30日

WordPressのテキスト編集を、Sublime Textのようなテキストエディタでリッチに編集したい…。

そんな思いを実現してくれるプラグインがありました。プラグイン「HTML Editor Syntax Highlighter」を使えば、タグの自動補完、コードのハイライトなど、リッチなテキストエディタをWordPress上で実現できます！

こんな感じ。

ハイライトがあるだけでも、少し興奮しますね。では早速、使い方を見ていきましょう。

はにわまん

投稿画面が良い意味でWordPressっぽくなくなります

プラグイン「HTML Editor Syntax Highlighter」の導入

外観 > プラグイン > 新規追加 > キーワード「HTML Editor Syntax Highlighter」 > 今すぐインストール

インストールしたら「有効化」してください。

WordPress.org 日本語

HTML Editor Syntax Highlighter Add syntax highlighting to WordPress code editors using CodeMirror.js

どこでもいいので投稿編集画面を開きます（例：投稿 > 新規追加）。なんだかカッコいい雰囲気のエディタに変わっているはずです。

右上にある歯車アイコンをクリックすると設定できるようになりますので、各設定項目を見ていきましょう。

Match Brackets	対応する括弧をハイライトしてくれる
Match Tags	対応しているタグをハイライトしてくれる
Highlight Selection Matches	選択している単語を同じ単語をハイライトする
Auto Close Tags	`</`を入力したタイミングでタグを自動補完してくれる
Auto Close Brackets	`(`を入力すると、閉じる`)`を自動補完してくれる。
Code Folding	コードをたためるようにする
Show Scrollbars	スクロールバーを表示させる
Key Bindings	キーの扱い方。慣れているエディタを選ぶといいでしょう。 Default Sublime Vim Emacs

Theme	Material
Indent	2
Line Wrap	折り返し「あり」
Numbering	ナンバリング「あり」
Font Size	13
Line Height	1.5
Match Brackets	チェック
Match Tags	チェック
Highlight Selection Matches	チェック
Auto Close Tags	チェック
Auto Close Brackets	チェック
Code Folding	チェック
Show Scrollbars	チェック
Key Bindings	Default