Code Prettify コードを見やすく表示するプラグイン 設定方法と使い方

ワードプレス(WordPress)の投稿ページ等にHTMLやCSSのスクリプトやプログラム言語のコードを記載する際に見やすく表示することがきるプラグイン Code Prettify を解説します。

Code Prettify で実現できること

Code Prettify プラグインを入れるとブログサイトに表示するHTMLやCSS、PHPなどのスクリプトコードを見やすくカラフルに表示することができます。

• HTML等のスクリプトやプログラムコード等を見やすく表示してくれる
• プラグインを有効にするだけで気軽に利用可能。設定画面は存在しない

Code Prettifyプラグインを使って表示させたP’HPコード

↑Code Prettifyプラグインを利用すると初このように表示することができます。

Code Prettify のインストール方法

Code Prettify プラグインをWordPressにインストールする方法を解説します。

WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面

1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
2. 「新規追加」をクリックします
3. 検索ボックスに”Code Prettify ”と入力すると下に検索結果が表示されます
4. ”Code Prettify ”の「今すぐインストール」ボタンをクリックします

“Code Prettify ”のインストール完了画面

↑Code Prettify のインストールが完了すると有効化ボタンが表示されるのでクリックします。

“Code Prettify “を有効化すると表示される画面

これでCode Prettify のインストールと有効化は完了です。

Code Prettify の設定と使い方

Code Prettifyプラグインに設定画面はありません。

プラグインを有効化するだけでブロックエディタで挿入したコードを見やすく表示してくれます。

Code Prettifyの使い方

Code Prettifyを使って、実際に投稿ページでコードを見やすく設定する手順と方法を解説します。

ブロックを追加画面

↑投稿記事の編集画面でブロックを追加→コードを選択します。

コードを編集画面

↑コードテキストを入力します。

ショートコードやCSSのコードもまったく同様の手順でOKです。

下書き保存または更新してプレビューします。

表示を確認

Code Prettifyを使って入力したHTMLコード

↑背景色はそのままで、コードテキストを色分けして表示してくれます。

Code Prettifyプラグインの機能はこれだけです。

まとめ

Code Prettifyを利用するとHTMLやCSSのコード、他のプログラム言語のコードを記事に貼り付けたときに、コードタグの種類に応じて色を変更して見やすく表示することができます。

設定ページが存在せず、プラグインを有効化するだけで非常に簡単に使えるのが最大の特長です。

いっぽう、コードテキストの色を変更する機能しかなく、シンプル過ぎるがゆえに、背景色等は一切カスタマイズできないのがデメリットです。

もし視認性の向上が目的の場合は、Code Prettifyはおすすめできません。

視認性の向上やデザインにこだわってカスタマイズ可能な、他のプラグインを導入することをおすすめします。

とにかくデザインや視認性重視で、シンプルな白黒のデザインを使いたい場合は「Urvanov Syntax Highlighter」がイチオシです。

もっと多機能で細かくカスタマイズしたい場合は「Enlighter – Customizable Syntax Highlighter」プラグインをおすすめします↓