HTML Editor Syntax Highlighter
HTML Editor Syntax Highlighter

WordPressのテキストエディタをシンタックスハイライトするプラグイン「HTML Editor Syntax Highlighter」

WordPressのデフォルトテキストエディタを使っていると、シンタックスハイライトされていないので、結構見づらかったりすることがありませんか? 何も色分けされていないテキストなので、タグを探すのも見づらくて大変ですね。そんな悩みを解決するプラグインが「HTML Editor Syntax Highlighter」です。WordPressで記事を書く際に、テキストエディタを使ってHTMLコードを書いている方には大変便利なプラグインです。

プラグインのインストールと有効化

下記リンクページはJetpackをインストールし有効化するまでの手順を記載したページです。
「Jetpack 」を「HTML Editor Syntax Highlighter」と置き換えてプラグインのインストールをしてください。

HTML Editor Syntax Highlighterでの表示

通常WordPressのテキストエディタでは、以下のような編集画面になります。なかなか見づらいですね…

WordPressのノーマルテキストエディタ

しかし、「HTML Editor Syntax Highlighter」を使うと…
下図のように見やすくハイライトされた編集画面になります。

テキストエディタ

HTML Editor Syntax Highlighterの設定

「HTML Editor Syntax Highlighter」をインストール後、記事編集画面や固定ページ編集画面などのテキストエディタ(HTMLエディタ)で使用します。なので、各設定は記事編集画面や固定ページ編集画面のテキストエディタで行います。

設定項目を開くには、下図テキストエディタ画面の歯車アイコンをクリックします。

HTML Editor Syntax Highlighter設定アイコン

すると各種設定項目が開きます。この設定項目で自分の好きなようにカスタマイズできます。

HTML Editor Syntax Highlighter設定項目表示

設定項目「Theme」

Themeの項目ではSyntax Highlighterの見た目を変更できます。この項目はご自分が見やすいテーマを選択すると良いでしょう。

Theme設定

設定項目「Indent」

Tabボタンを使った時などの、インデントサイズを設定します。このサイズもお好みで…

インデント設定

設定項目「Line Wrap」

テキストエディタの編集エリアより行の文字数がはみ出た場合、折り返すか折り返さないかの設定ができます。この設定もお好みで構いませんが、個人的には折り返した方が便利な気がします。

Line Wrap

設定項目「Numbering」

テキストエディタの行番号を表示するかしないかの設定になります。個人的には行番号があった方が見やすいかも…

Numbering

設定項目「Font Size」

テキストエディタのフォントサイズを指定します。これもご自分が使用していて見やすいサイズを設定すると良いでしょう。

Font Size

設定項目「Line Height」

行間のサイズを指定します。これも使用していて見やすいサイズを設定すると良いでしょう。

Line Height

その他設定

「more…」をクリックすると更に詳細な設定が可能です。

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コードを直接入力して記事を編集する方には、重宝するプラグインではないでしょうか。上手く活用すれば、記事編集がかなり効率化されるかもしれませんね


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利