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

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

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

関連記事

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

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

使用方法

クラシックエディターの場合

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

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

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

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

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

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

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

プラグインエディター
HTML Editor Syntax Highlighter 使用方法 プラグインエディター
テーマエディター
HTML Editor Syntax Highlighter 使用方法 テーマエディター
スポンサーリンク

【HTML Editor Syntax Highlighter】の設定

  • STEP1
    エディターの歯車アイコンをクリック
    エディターのをクリックします。

    HTML Editor Syntax Highlighter 設定

  • STEP2
    項目の設定
    をクリックすると、設定画面が開きます。

    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』が開く
  • STEP3
    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.2.3
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

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