ワードプレス(WordPress)の投稿ページ等にHTMLやCSSのスクリプトやプログラム言語のコードを記載する際に見やすく表示することがきるプラグイン Enlighter – Customizable Syntax Highlighter を解説します。
- Enlighter – Customizable Syntax Highlighter の使い方と詳細な設定方法がわかります
Enlighter – Customizable Syntax Highlighter で実現できること
Enlighter – Customizable Syntax Highlighter プラグインを入れるとブログサイトに表示するHTMLやCSS、PHPなどのスクリプトコードを見やすくカラフルに表示することができます。
- HTML等のスクリプトやプログラムコード等を見やすく表示してくれる
- コードテキストの見た目を非常に細かくカスタマイズできる
Enlighter – Customizable Syntax Highlighterで表示させたHTMLコード↑Enlighter – Customizable Syntax Highlighterプラグインを使って表示させたHTMLコードです。
Enlighter – Customizable Syntax Highlighter のインストール方法
Enlighter – Customizable Syntax Highlighter プラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”Enlighter – Customizable Syntax Highlighter ”と入力すると下に検索結果が表示されます
- ”Enlighter – Customizable Syntax Highlighter ”の「今すぐインストール」ボタンをクリックします
“Enlighter – Customizable Syntax Highlighter ”のインストール完了画面↑Enlighter – Customizable Syntax Highlighter のインストールが完了すると有効化ボタンが表示されるのでクリックします。
“Enlighter – Customizable Syntax Highlighter “を有効化すると表示される画面これでEnlighter – Customizable Syntax Highlighter のインストールと有効化は完了です。
Enlighter – Customizable Syntax Highlighter の設定と使い方
Enlighter – Customizable Syntax Highlighterの設定画面はダッシュボード(管理画面)にある「Enlighter」です。
WordPressのダッシュボード(管理画面)↑Enlighter – Customizable Syntax Highlighterの設定画面はWoredPressのダッシュボード(管理者画面)にある「Enlighter」をクリックします。
Enlighter – Customizable Syntax Highlighter の設定
Enlighter – Customizable Syntax Highlighterの設定画面は次のようになっています。
- Appearance (外観)
- Theme Customizer (テーマカスタマイザ－)
- Editing (編集)
- Compatibility (互換性)
- Extensions (拡張機能)
- Opstions (オプション)
- About (新着情報や変更履歴)
設定できる箇所は非常に多いですがAppearance (外観)ぐらいしか設定を変更する箇所はありません
Appearance (外観)設定
Appearance (外観)設定にはAppearanceとToolbarの2つの設定タブがあります。
Enlighter – Customizable Syntax Highlighter のAppearance (外観)設定画面| 設定項目名 | 意味 |
|---|---|
| Theme(テーマ) | コード画面のフォントの色や背景色を指定。初期設定はEnlighter |
| Code indentation(コードのインデント) | タグ情報(インデント)をスペースに変換するか否か。初期設定は4つのスペースに変換 |
| Text overflow(テキストオーバーフロー) | 長いテコードキストを改行するかスクロール表示するかを指定。初期設定はBreak line(改行) |
| Line-numbering(行番号) | 行番号を表示するか否か。初期設定は有効 |
| Line-hovereffect(ラインホバー効果) | コードテキストにマウスカーソルを当てると色を変えるか否か。初期設定は有効 |
| RAW-Code on doubleclick(RAW-ダブルクリックのコード) | ダブルクリックでコードテキストを装飾無しにするか否か。初期設定は無効 |
Enlighter – Customizable Syntax Highlighterの設定はとくに変更する箇所はないので初期設定の状態のままで大丈夫です
Toolbar (ツールバー)設定
Enlighter – Customizable Syntax Highlighter のToolbar (ツールバー)設定画面| 設定項目名 | 意味 |
|---|---|
| Visibility(可視性) | ツールバーを表示するか否か。初期設定はマウスカーソル時に表示する |
| Raw code button(生コードボタン) | 装飾されていない素のテキストコードを表示するか否か。初期設定は有効 |
| New window button(新しいウィンドウボタン) | 装飾されていない素のテキストコードを別画面で表示するか否か。初期設定は有効 |
| Copy-to-clipboard button(クリップボードにコピーボタン) | クリップボードにコピーボタンを表示するか否か。初期設定は有効 |
| EnlighterJS website button(EnlighterJSWebサイトボタン) | 開発情報Webサイトへの外部リンクボタンを表示するか否か。初期設定は有効 |
Theme Customizer (テーマカスタマイザ－)設定
下記項目のコードテキストのデザインなどの見た目を個別に細かくカスタマイズすることができます。
- 基本テーマ Theme Customizer
- 初期設定
- 線
- ボタン
- RAWコード
- コメント
- 式
- 構文
- キーワード
- 言語
- メソッド
- 数字
- 文字列
- 文章
- スタイルシート
上記の各項目ごとに下記の設定を変更することが可能です。
- フォントスタイル/ファミリー
- フォントの太さ
- フォントサイズ
- フォントの色
- 背景色
初期設定のままで大丈夫ですが、当項目をカスタマイズすることで、より見やすくすることも可能です。
Editing (編集)設定
下記項目のエディタでEnlighter – Customizable Syntax Highlighterプラグインを利用できるようにする設定することが可能です。。
- Gutenbergエディタ
- クラッシクエディタ
- マークダウン
- ショートコード
- テキスト/RAWエディタ
マークダウン以外は初期設定で有効になっています。
マークダウン(Markdown)とはRedmineなどのツールで利用することができる記法のことです
Compatibility (互換性)設定
他のコードを見やすく表示するプラグインで作成したテキストコードをEnlighter – Customizable Syntax Highlighterプラグインでも利用できるように設定することができます。
Crayon Syntax Highlighterで作成したコードテキストも当設定を有効にすることでEnlighter – Customizable Syntax Highlighterプラグインを利用して表示することが可能です。
Extensions (拡張機能)設定
情報量の多くなりがちな記事に有効な「もっと見る」ボタンのテキストコードを表示させる設定や、ページの一番下まで読んでいくと自動的に次の投稿が表示されるJetpackプラグインの無限スクロール機能のテキストコードを表示させることができます。
Opstions (オプション)設定
Enlighter – Customizable Syntax Highlighterプラグインのリソース、キャッシュなどの上級者オプションを設定変更することが可能です。
おすすめの設定
Enlighter – Customizable Syntax Highlighterのおすすめの設定を紹介します。
Appearance
- テーマ(Theme)をMonokaiに変更
- ラインホバー効果(Line-hovereffect)を無効
Toolbar
- EnlighterJSWebサイトボタンを無効
Options
- OptionsのOptimization(最適化)のDynamic Resource Invocation (DRI)(動的リソース呼び出し)を有効
※この機能を有効にすることでリソースの消費を防止できます。
Enlighter – Customizable Syntax Highlighteの使い方
Enlighter – Customizable Syntax Highlighterを使って、実際に投稿ページでコードを見やすく設定する手順と方法を解説します。
投稿を編集画面↑投稿記事の編集画面で見やすく表示させてコードテキストを入力したい箇所でツールバー内のあるCode Insertボタンをクリックします。
Enlighter – Customizable Syntax Highlighterのコード入力画面↑Enlighter – Customizable Syntax Highlighterのコード入力画面が表示されるので言語を選択して、下のテキストボックスにコードテキストを入力します。
プログラム言語が不明な場合は初期設定のGeneric Highlightingのままで大丈夫です
Enlighter – Customizable Syntax Highlighterを使ってショートコードを入力した画面↑Enlighter – Customizable Syntax Highlighterを使ってショートコードを入力するとこのようにビジュアルエディタで表示されます。
他の長いHTMLやCSSのコードもまったく同様の手順でOKです。
次は記事をプレビューして先ほど入力したショートコードを表示してみます。
表示を確認
Enlighter – Customizable Syntax Highlighterを使って入力したショートコードの実際のPC画面↑PC画面ではこのように表示されます。
まとめ
Enlighter – Customizable Syntax Highlighterを利用するとHTMLやCSSのコード、他のプログラム言語のコードを記事に貼り付けて紹介や解説するときに、とても見やすく表示させることができます。
しかも文字の大きさやフォントの種類、背景色などを細かくカスタマイズできるので非常に多機能です。
他にもコードを見やすくするプラグインは多数ありますが、機能の多さは随一です。
プラグイン自体の更新(アップデート)も実施されているのでセキュリティの面でも安心して利用できます。
WordPressやWebプログラミングを解説する記事には最適です。
利用者の視認性の向上につながるので積極的に導入したほうが良いおすすめのプラグインです。
