【WP】ソースコードを綺麗に表示するプラグイン「Crayon Syntax Highlighter」

<pre>タグと<code>タグは見づらい

<pre>タグと<code>タグを使用してソースコードの記述を表示するには、デフォルトだとこのようになります。

しかし、これでは縦幅が大きく、色味も無いので見づらいです。

そこで、Wordpressのプラグインで何か良いのはないかなと探していたところ「Crayon Syntax Highlighter」と言うプラグインを発見しました。

ソースコードを綺麗に表示するWordpressプラグイン「Crayon Syntax Highlighter」

完成図のビジュアル

インストール方法

管理画面　＞　プラグイン　＞　新規追加　＞　「rayon Syntax Highlighter」で検索　＞　今すぐインストール　＞　有効化　＞

設定方法

管理画面　＞　設定　＞　SyntaxHighlighter

設定は下の方にプレビューがあるので、見ながら設定を変更していましょう。

私はデフォルトのままで何もいじっていません。

使い方

投稿や固定ページの「ビジュアル」ではなく「テキスト」の方に「crayon」とあるのでクリック

下のような画面が出てくるので「Title」や「コード」に記述して「Add」をクリック

このように表示されました！
見やすい！！

参考記事
https://miningoo.com/154
http://michisugara.jp/archives/2011/syntax_highlighter.html

ありがとうございました！