ワードプレス(WordPress)の投稿ページ等にHTMLやCSSのスクリプトやプログラム言語のコードを記載する際に見やすく表示することがきるプラグイン Urvanov Syntax Highlighter を解説します。
- Urvanov Syntax Highlighter の使い方と詳細な設定方法がわかります
Urvanov Syntax Highlighter で実現できること
Urvanov Syntax Highlighter プラグインを入れるとブログサイトに表示するHTMLやCSS、PHPなどのスクリプトコードを見やすくカラフルに表示することができます。
- HTML等のスクリプトやプログラムコード等を見やすく表示してくれる
Urvanov Syntax Highlighterプラグインを使って表示させたHTMLコード↑Urvanov Syntax Highlighterプラグインを実際に利用して表示させています。
Urvanov Syntax Highlighterは昔はCrayon Syntax Highlighterという名称でした
Urvanov Syntax Highlighter のインストール方法
Urvanov Syntax Highlighter プラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”Urvanov Syntax Highlighter ”と入力すると下に検索結果が表示されます
- ”Urvanov Syntax Highlighter ”の「今すぐインストール」ボタンをクリックします
“Urvanov Syntax Highlighter ”のインストール完了画面↑Urvanov Syntax Highlighter のインストールが完了すると有効化ボタンが表示されるのでクリックします。
“Urvanov Syntax Highlighter “を有効化すると表示される画面これでUrvanov Syntax Highlighter のインストールと有効化は完了です。
Urvanov Syntax Highlighter の設定と使い方
Urvanov Syntax Highlighterの設定画面はダッシュボード(管理画面)にある「Enlighter」です。
WordPressのダッシュボード(管理画面)↑Urvanov Syntax Highlighterの設定画面はWoredPressのダッシュボード(管理者画面)の設定の中の「Crayon」をクリックします。
旧 Crayon Syntax Highlighterと同じCrayon(クレヨン)というプラグイン名になっていますが設定画面は最新のUrvanov Syntax Highlighterになっています
Urvanov Syntax Highlighter の設定
Urvanov Syntax Highlighterの設定画面は日本語になっています。
テーマ(デザイン)の変更結果を画面内のプレビュー画面で確認できます。
設定できる箇所は多いですがテーマや行の変更ぐらいしか変更する必要はありません。
設定は1画面で、一般設定とデバックの大項目があります。
一般設定
- テーマ ：見た目のデザインを指定
- フォント ：テキストの種類とサイズを指定
- サイズ：テキストボックスのサイズと余白を指定
- ツールバー：ツールバーの表示を指定
- 行：左端の行番号やコードの折り返し等を指定
- コード：装飾無しテキストの表示方法等を指定
- タグ：スクリプトタグの扱いを指定
- プログラム言語：プログラム言語(全66種類)を指定
- 読込みファイル：絶対パスを表示可能
- Posts：プラグインが使用している投稿記事の確認管理
- タグエディタ：タグのルールを指定
- その他
デバッグ
- エラー
- ログファイル
Appearance (外観)設定にはAppearanceとToolbarの2つの設定タブがあります。
一般設定
Urvanov Syntax Highlighterの一般設定画面 1/3
Urvanov Syntax Highlighterの一般設定画面 2/3
Urvanov Syntax Highlighterの一般設定画面 3/3デバッグ設定
Urvanov Syntax Highlighterのデバッグ設定画面Urvanov Syntax Highlighterの設定は好みのテーマに変更する以外は、とくに変更する箇所はありません。初期設定の状態のままで大丈夫です
おすすめの設定
Urvanov Syntax Highlighterのおすすめの設定を紹介します。
テーマ
- Sublime Text または Drak Terminal に変更
ツールバー
- コードを押し下げるのではなくコード上に重ねて表示を無効
テーマ毎の違い
背景が黒のテーマの中で下記の2種類が見やすいです。
Urvanov Syntax Highlighterのテーマ：Sublime Text
Urvanov Syntax Highlighterのテーマ：Drak TerminalEnlighter – Customizable Syntax Highlighteの使い方
Urvanov Syntax Highlighterを使って、実際に投稿ページでコードを見やすく設定する手順と方法を解説します。
投稿を編集画面↑投稿記事の編集画面でコードテキストを入力したい箇所でツールバー内のある<>ボタンをクリックします。
Urvanov Syntax Highlighterのコード入力画面↑Urvanov Syntax Highlighterのコード入力画面が表示されるのでテキストボックスにコードテキストを入力し、最後に挿入をクリックします。
プログラム言語が不明な場合は初期設定のままで大丈夫です。
設定画面と同じ下記の項目を個別に設定することも出来ます。
全体設定よりも個別設定の方が優先されます。
Urvanov Syntax Highlighterのコード入力画面の下に表示される個別設定項目- テーマ ：見た目のデザインを指定
- フォント ：テキストの種類とサイズを指定
- サイズ：テキストボックスのサイズと余白を指定
- ツールバー：ツールバーの表示を指定
- 行：左端の行番号やコードの折り返し等を指定
- コード：装飾無しテキストの表示方法等を指定
Urvanov Syntax Highlighterを使ってHTMLコードを入力した画面↑Urvanov Syntax Highlighterを使ってHTMLコードを入力するとこのようにビジュアルエディタで表示されます。
短いショートコードやCSSのコードもまったく同様の手順でOKです。
次は記事をプレビューして先ほど入力したHTMLコードを表示してみます。
表示を確認
Urvanov Syntax Highlighterを使って入力したHTMLコード↑PC画面ではこのように表示されます。
まとめ
Urvanov Syntax Highlighterを利用するとHTMLやCSSのコード、他のプログラム言語のコードを記事に貼り付けて紹介や解説するときに、とても見やすく表示させることができます。
WordPressやWebプログラミングを解説する記事には最適です。
設定箇所も多くなく、好みのデザインに変更するだけで、あとは初期設定の状態のままで利用することが可能です。
コードを見やすくするプラグイン中でもデザインと機能面のバランスが最もとれているので気軽に利用することができます。
利用者の視認性の向上につながるので積極的に導入したほうが良いおすすめのプラグインです。
プラグイン自体の更新(アップデート)も実施されているのでセキュリティの面でも安心して利用できます。
もっと多機能で細かくカスタマイズしたい場合は「Enlighter – Customizable Syntax Highlighter」プラグインをおすすめします↓
