WordPressでソースコードを簡単キレイに貼り付けよう

ソースコードを簡単キレイHTMLやCSS、JavascriptなどのソースコードをWordPressで表示させたいとき、そのまま書いてしまっては他の文章と見分けがつかなくてとても読みづらくなります。

そんなときは、「Crayon Syntax Highlighter」というプラグインを使いましょう。

インストール

WordPressの管理画面にログインしたら、プラグイン > 新規追加 > Crayon Syntax Highlighter を検索して、見つかったらインストール。

Crayon Syntax Highlighter

インストール後はプラグインを有効化しましょう。

インストールしているプラグイン

このプラグインは設定を変えられますが、初期設定のままでももちろんOK。

初期設定

使い方

WordPressの投稿画面で、ソースコードを挿入したい位置で下の画面にあるボタンをクリックします。

ソースコードを挿入したい位置で下の画面にあるボタンをクリック※プラグインのバージョンによって「crayon」と表示されている場合もあります。

ポップアップしたウインドウにソースコードを記述して「挿入」ボタンをクリックします。
ソースコードを記述して「挿入」ボタンをクリック

実際に貼り付けるとこのようになります。

これで簡単キレイにソースコードを貼り付けることができました。