HTML Editor Syntax Highlighter

HTML Editor Syntax Highlighterは、WordPressのテキストエディタに「Syntax Highlighter」を拡張できるプラグインです。エディタに記述したHTMLコードを見やすくすることができます。

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

WordPressで記事を書く際に、テキストエディタを利用してHTMLコードを書いている方に役立つプラグインです。エディタの文字サイズを変更できるので、エディタの文字を読みやすくする効果もあります。便利なプラグインなので活用しましょう。

はじめに

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

  • WordPressのテキストエディタに「Syntax Highlighter」を拡張できる。
  • 記事編集エディタに記述したHTMLコードが見やすくなる。
  • 記事編集エディタの文字サイズを変更できるので、文字が読みやすくなる。
  • 投稿・固定ページ・カスタム投稿タイプ・テーマ編集・プラグイン編集のテキストエディタで利用できる。
  • エディタのデザインや表示内容はオプションで自由に変更できる。
  • プラグインを有効化するだけで利用できる。

エディタの表示例

このプラグインはテキストエディタ(HTMLエディタ)専用です。

記事編集エディタ

Syntax Highlighterとは?

Syntax Highlighter(シンタックス・ハイライター)は、Webページ上に表示したソースコードを、アプリケーションで動作するエディタのように綺麗に表示する手法のことです。

WordPressで利用できる「Syntax Highlighter」も存在します。この記事では、その中の一つを紹介しています。

インストール方法

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

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

プラグインの使い方

記事編集エディタ

このプラグインは「投稿・固定ページ・カスタム投稿タイプ・テーマ編集・プラグイン編集」のテキストエディタで利用できます。
記事編集エディタに記述したHTMLコードが見やすくなる効果があります。

記事編集エディタ

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

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

アイコンをクリックする

アイコンをクリックする

「Theme」をクリックする

「Theme」をクリックする

テーマの選択
  • None
  • 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のテキストエディタに「Syntax Highlighter」を拡張できるプラグインです。エディタに記述したHTMLコードを見やすくすることができます。上手く活用すると、記事を書く作業が効率化できるかもしれません。

WordPressで記事を書く際に、テキストエディタを利用してHTMLコードを書いている方に役立つプラグインです。エディタの文字サイズを変更できるので、エディタの文字を読みやすくする効果もあります。便利なプラグインなので活用しましょう。

スポンサーリンク