HTML Editor Syntax Highlighter: エディタのコードを見やすくWordPressプラグイン

HTML Editor Syntax Highlighterは、エディタに書いたコードを見やすくできるWordPressプラグインです。エディタに表示するHTML・CSS・JSなどのコードを見やすくできます。

投稿・固定ページ・カスタム投稿タイプ・テーマ編集・プラグイン編集のエディタで利用できます。エディタのデザインや表示内容はオプションで自由に変更できます。

このプラグインは初心者向けではありません。WordPressのエディタを利用して、テキスト・HTML編集をしていているプロの制作者向けに用意されています。

WordPressで記事を編集する際に、テキスト・HTML編集を利用していている方は、作業の効率化に繋がるプラグインなので活用しましょう。

はじめに

このプラグインが優れていること

• クラシックエディタ・ブロックエディタの両方に対応。
• クラシックエディタのテキスト編集に「Syntax Highlighter」の機能を拡張できる。
• ブロックエディタの場合は、コードエディタに「Syntax Highlighter」を適用できる。
• 記事を編集する際のエディタに記述したコードが見やすくなる。
• 書いたコードに構文エラーがある場合、ハイライト表示してくれる。
• エディタの外観・文字サイズを変更できるので、文字・コードが読みやすくなる。
• 投稿・固定ページ・カスタム投稿タイプ・テーマ編集・プラグイン編集のエディタで利用できる。
• エディタのデザインや表示内容はオプションで変更できる。
• プラグインを有効化するだけで利用できる。

Syntax Highlighterとは？

Syntax Highlighter（シンタックス・ハイライター）は、Webページに表示するコードを綺麗に表示する手法のことです。

アプリケーションで動作するエディタのようにコードが綺麗に表示されます。

このプラグインはWordPressで動作する「Syntax Highlighter」です。

信頼性

アップデート頻度は低めですが、プラグインが定期的にアップデートされており、保守が行われています。
頻度は低めですが、サポートフォーラムでも開発者が質問に回答しています。
プラグインの保守は適切に行われているようです。

確認日：2021.09.24

確認できた内容

• 定期的なアップデートの実績
• サポートフォーラム評判
• プラグインの評価
• プラグインの利用者数

インストール方法

管理画面から検索してインストールして下さい。
もしくは「wordpress.org」からダウンロードし、アップロードしてインストールして下さい。

1. WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「HTML Editor Syntax Highlighter」で検索
2. 「wordpress.org」からダウンロード

エディタでの利用例

このプラグインはクラシックエディタ・ブロックエディタの両方に対応しています。

クラシックエディタ

クラシックエディタのテキスト・HTML編集モードで利用できます。

ブロックエディタ

ブロックエディタのコードエディタ（コード編集モード）で利用できます。

プラグインの使い方

記事編集エディタ

このプラグインは「投稿・固定ページ・カスタム投稿タイプ・テーマ編集・プラグイン編集」のエディタで利用できます。

主にクラシックエディタで利用します。記事編集時にエディタに記述したHTMLコードが見やすくなる効果があります。

エディタのデザインを変更する

エディタの右側にあるアイコンをクリックすると、オプション画面が表示されます。
「Theme」を変更すると、エディタのデザインを変更できます。

アイコンをクリックする

「Theme」をクリックする

テーマの選択

• None
• WordPress
• Default
• 3024-day
• 3024-night
• Abcdef
• Ambiance-mobile
• Ambiance
• Base16-dark
• Base16-light
• Bespin
• Blackboard
• Cobalt
• Colorforth
• Dracula
• Duotone-dark
• Duotone-light
• Eclipse
• Elegant
• Erlang-dark
• Hopscotch
• Icecoder
• Isotope
• Lesser-dark
• Liquibyte
• Material
• Mbo
• Mdn-like
• Midnight
• Monokai
• Neat
• Neo
• Night
• Panda-syntax
• Paraiso-dark
• Paraiso-light
• Pastel-on-dark
• Railscasts
• Rubyblue
• Seti
• Solarized
• The-matrix
• Tomorrow-night-bright
• Tomorrow-night-eighties
• Ttcn
• Twilight
• Vibrant-ink
• Xq-dark
• Xq-light
• Yeti
• Zenburn

オプション

エディタの右側にあるアイコンをクリックすると、オプション画面が表示されます。

設定できる内容

オプションでエディタの表示内容を調整できます。

• インデント（Indent）
• 行の折り返し（Line Wrap）
• 行数の表示（Numbering）
• 文字サイズ（Font Size）
• 行間（Line Height）

その他のオプション

「more...」のボタンをクリックすると、高度な設定の画面が表示されます。
この設定は特に変更する必要はありませんが、エディタに関する細かい調整ができます。

まとめ

HTML Editor Syntax Highlighterは、エディタに書いたコードを見やすくできるWordPressプラグインです。エディタに表示するHTML・CSS・JSなどのコードを見やすくできます。

このプラグインは初心者向けではありません。WordPressのエディタを利用して、テキスト・HTML編集をしていているプロの制作者向けに用意されています。

WordPressで記事を編集する際に、テキスト・HTML編集を利用していている方は、作業の効率化に繋がるプラグインなので活用しましょう。

広告

エックスサーバー