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

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

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

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

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

こんな場合におススメ

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

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

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

インストール

HTML Editor Syntax Highlighter インストール

  1. 管理画面から プラグイン > 新規追加 とクリックする
  2. HTML Editor Syntax Highlighter“で検索する
  3. “今すぐインストール”をクリック。インストール後、有効化する

または、配布サイトからダウンロードして、インストール。
HTML Editor Syntax Highlighter – WordPress プラグイン | WordPress.org

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

関連記事

WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする […]

WordPressのプラグインをインストールする方法

使用方法

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

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

ブロックエディター(Gutenberg)の場合、エディタをコードエディターに変更すると、シンタックスハイライト表示されるようになります。
HTML Editor Syntax Highlighter ブロックエディター

設定

歯車アイコンをクリックすると、設定画面が開きます。
HTML Editor Syntax Highlighter 設定

基本設定

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』が開く

Advanced Options

Highlighting

HTML Editor Syntax Highlighter Highlighting

Match Brackets プログラムコードなどで対応する括弧をハイライト表示するかの選択
Match Tags 開始タグと閉じタグをハイライト表示するかの選択
Highlight Selection Matches 選択した単語と同じ単語をハイライト表示するかの選択

Auto Completion

HTML Editor Syntax Highlighter Auto Completion

Auto Close Tags タグを自動補完するかの選択
Auto Close Brackets 括弧を自動補完するかの選択

Editor Tools

HTML Editor Syntax Highlighter Editor Tools

Code Folding コードを折りたたみ表示するかの選択
Show Scrollbars スクロールバーを表示するかの選択

Key Bindings

HTML Editor Syntax Highlighter Key Bindings

Key Bindings キーバインドの選択
Default:デフォルト
Sublime
Vim
Emacs

動作確認環境

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

まとめ

  • HTML Editor Syntax Highlighter】は、テキストエディターをシンタックスハイライトするプラグイン。
  • HTMLコードをきれいに色分け表示するだけでなく、タグの自動補完も行うことができます。
テキストエディターをシンタックスハイライトする【HTML Editor Syntax Highlighter】の使い方
最新情報をチェックしよう!
スポンサーリンク