WordPressのエディターは何をお使いでしょうか。
ブロックエディター？ それともクラシックエディター？？
クラシックエディターで、なおかつテキストエディターを使っている方もまだまだいらっしゃると思います。
でもテキストエディターで記事を書く際、少し見にくいなって思うことはありませんか？
きれいに色分け表示されていたら見やすくなって、執筆作業もはかどりますね。
【HTML Editor Syntax Highlighter】は、テキストエディターをシンタックスハイライトするプラグイン。
HTMLコードをきれいに色分け表示するだけでなく、タグの自動補完などを行うこともできます。
こんな場合におススメ
- 投稿画面のテキストエディター（旧エディタ）を見やすくしたい
- テキストエディターをシンタックスハイライト表示するようにしたい
プラグインを使ってできること
- 投稿画面のテキストエディターをシンタックスハイライト表示する
- プラグイン・テーマエディターをシンタックスハイライト表示する
- 行番号を表示したり、タグの自動補完などを行うことができる
スポンサーリンク
目次
インストール
- 管理画面 > プラグイン > 新規追加 とクリックする
- HTML Editor Syntax Highlighterで検索する
- 今すぐインストールをクリック。インストール後有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
関連記事
WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]
使用方法
クラシックエディターの場合
クラシックエディター（テキストエディター）の場合は、プラグインを有効化すると自動的にエディターがシンタックスハイライトされるようになります。
ブロックエディターの場合
︙をクリックし、エディターをコードエディターに変更すると、シンタックスハイライト表示されるようになります。
プラグイン・テーマエディターの場合
プラグイン・テーマエディターも、プラグインを有効化すると自動的にエディターがシンタックスハイライト表示されるようになります。
プラグインエディター
テーマエディター
スポンサーリンク
【HTML Editor Syntax Highlighter】の設定
- STEP1エディターの歯車アイコンをクリックエディターのをクリックします。
- STEP2項目の設定をクリックすると、設定画面が開きます。
Theme エディターのテーマ（デザイン）を選択 Indent インデントのサイズを『1～6』の中から選択 Line Wrap 行を折り返し表示するかの切り替え Numbering 行番号を表示するかの切り替え Font Size フォントサイズを『8～20』の中から選択 Line Height 行間を『1・1.25・1.5・1.75・2』の中から選択 more… クリックすると詳細設定『Advanced Options』が開く - STEP3Advanced Optionsの設定『more…』をクリックすると【Advanced Options】が開き、高度なオプションを設定することができます。
Match Brackets プログラムコードなどで対応する括弧をハイライト表示するかの選択 Match Tags 開始タグと閉じタグをハイライト表示するかの選択 Auto Close Tags タグを自動補完するかの選択 Auto Close Brackets 括弧を自動補完するかの選択 Code Folding コードを折りたたみ表示するかの選択 Show Scrollbars スクロールバーを表示するかの選択 Key Bindings キーバインドの選択
動作確認環境
- バージョン 2.4.2
- WordPress 5.2.3
まとめ
- 【HTML Editor Syntax Highlighter】は、テキストエディターとプラグイン・テーマエディターをシンタックスハイライトするプラグイン。
- コードをきれいに色分け表示するだけでなく、タグの自動補完も行うことができます。