MENU

テキストエディターをシンタックスハイライトする【HTML Editor Syntax Highlighter】

2020 5/26

WordPressのエディターは何をお使いでしょうか。
ブロックエディター? それとも旧エディター??

旧エディターで、なおかつテキストエディターを使っている方もまだまだいらっしゃると思います。

でもテキストエディターで記事を書く際、少し見にくいなって思うことはありませんか?
きれいに色分け表示されていたら見やすくなって、執筆作業もはかどりますね。

HTML Editor Syntax Highlighter】は、テキストエディターをシンタックスハイライトするプラグイン。

HTMLコードをきれいに色分け表示するだけでなく、タグの自動補完などを行うこともできます。

こんな場合におススメ

  • 投稿画面のテキストエディター(旧エディタ)を見やすくしたい
  • テキストエディターをシンタックスハイライト表示するようにしたい

プラグインを使ってできること

  • 投稿画面のテキストエディターをシンタックスハイライト表示する
  • プラグイン・テーマエディターをシンタックスハイライト表示する
  • 行番号を表示したり、タグの自動補完などを行うことができる
目次

インストール

HTML Editor Syntax Highlighter インストール
HTML Editor Syntax Highlighter インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. HTML Editor Syntax Highlighterで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

使用方法

ブロックエディターの場合

をクリックし、エディターをコードエディターに変更すると、シンタックスハイライト表示されるようになります。

HTML Editor Syntax Highlighter 使用方法 ブロックエディター

旧エディターの場合

旧エディター(テキストエディター)の場合は、プラグインを有効化すると自動的にエディターがシンタックスハイライトされるようになります。

HTML Editor Syntax Highlighter 使用方法 クラシックエディター

プラグイン・テーマエディターの場合

プラグイン・テーマエディターも、プラグインを有効化すると自動的にエディターがシンタックスハイライト表示されるようになります。

プラグインエディター

HTML Editor Syntax Highlighter 使用方法 プラグインエディター

テーマエディター

HTML Editor Syntax Highlighter 使用方法 テーマエディター

【HTML Editor Syntax Highlighter】の設定

STEP
エディターの歯車アイコンをクリック

エディターのをクリックします。

HTML Editor Syntax Highlighter 設定
STEP
項目の設定

をクリックすると、設定画面が開きます。

HTML Editor Syntax Highlighter 設定
Themeエディターのテーマ(デザイン)を選択
Indentインデントのサイズを『1~6』の中から選択
Line Wrap行を折り返し表示するかの切り替え
Numbering行番号を表示するかの切り替え
Font Sizeフォントサイズを『8~20』の中から選択
Line Height行間を『1・1.25・1.5・1.75・2』の中から選択
more…クリックすると詳細設定『Advanced Options』が開く
STEP
Advanced Optionsの設定

『more…』をクリックすると【Advanced Options】が開き、高度なオプションを設定することができます。

HTML Editor Syntax Highlighter 設定
Match Bracketsプログラムコードなどで対応する括弧をハイライト表示するかの選択
Match Tags開始タグと閉じタグをハイライト表示するかの選択
Auto Close Tagsタグを自動補完するかの選択
Auto Close Brackets括弧を自動補完するかの選択
Code Foldingコードを折りたたみ表示するかの選択
Show Scrollbarsスクロールバーを表示するかの選択
Key Bindingsキーバインドの選択

動作確認環境

  • バージョン 2.4.2
  • WordPress 5.4.1

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【HTML Editor Syntax Highlighter】は、テキストエディターとプラグイン・テーマエディターをシンタックスハイライトするプラグイン。
  • コードをきれいに色分け表示するだけでなく、タグの自動補完も行うことができます。
目次
閉じる