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

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

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

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

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

a:hover{
	text-decoration: none;
}

list > li{
	margin-bottom: 15px;
	margin-top: 15px;
	margin-margin: 15px;
}

a:hover{

text-decoration:none;

}

list>li{

margin-bottom:15px;

margin-top:15px;

margin-margin:15px;

}

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

管理画面　＞　設定　＞　SyntaxHighlighter

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

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

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

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

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

a:hover{
	text-decoration: none;
}

list > li{
	margin-bottom: 15px;
	margin-top: 15px;
	margin-margin: 15px;
}