ブログ記事に、Cssのソースコードやタグの入ったHTMLコードを記載したい時があります。
しかし、実際にWordpressでソースコードを直接記載すると、タグが上手く表示されなかったり、違ったコードになったりします。
ウェブでWordPress のカスタマイズをした記事などを見ると、
Crayon Syntax Highlighter
HTML や CSS を行番号つきで綺麗に表示しているブログをよく見かけますよね。
このように、ソースコードを綺麗に表示させることができるWordPressプラグインが「Crayon Syntax Highlighter」です。

「Crayon Syntax Highlighter」のインストール

WordPressのダッシュボードから「プラグイン」「新規追加」で、検索窓に「Crayon Syntax Highlighter」と入力。
Crayon Syntax Highlighter
「今すぐインストール」を選択して「有効化」してください。

「Crayon Syntax Highlighter」の設定

インストールして有効化したらプラグインの設定となるのですが、デフォルトのままでも十分使えます。
ひととおり、使い方に慣れたら、テーマや表示方法、カラーなどの細かな設定を行っていけば良いと思います。
「Crayon Syntax Highlighter」の設定は、ダッシュボードの 「設定」「Crayon」 から設定の確認・変更が行えますので確認しておきましょう。
Crayon Syntax Highlighter

「Crayon Syntax Highlighter」の使い方

では、実際に以下のコードをページ内に書き込んでみます。
Crayon Syntax Highlighter
まず、記事投稿画面から、「テキスト」タブを選択します。
次に、ソースコードを差し込む、2本のラインの間にカーソルを起きます。そして「cyayon」ボタンをクリックします。
Crayon Syntax Highlighter
ソースコードを書き込むエディターがひらきますので、先程のコードを貼り付けて、右上の「Add」をクリックします。
Crayon Syntax Highlighter

記事投稿画面に戻ると、ラインの間にコードが差し込まれたのが確認できます。

Crayon Syntax Highlighter

「テキスト」タブでは「&1t;」や「li&gt」など、文字化けかと思いますが、「ビジュアル」タブで見ると以下のようになっています。

Crayon Syntax Highlighter

プレビューで確認すると、「Crayon Syntax Highlighter」プラグインによって綺麗にコードが表示されています。

Crayon Syntax Highlighter

以上が「Crayon Syntax Highlighter」プラグインの説明になります。表示カラーやフォントなど、貴方のブログに合わせてカスタマイズされると良いと思います。

ぜひ活用してみてください!