WordPress上にコードをキレイに表示させるCrayon Syntax Highlighter

通常のサイトを作る上では全く必要ありませんが、WordPress上にコードをキレイに表示させる時に使えるのが、Crayon Syntax Highlighterプラグインです。

デザイン上の見せ方など、細かな設定ができて、投稿画面からのコードの挿入も簡単ですので、オススメです。

Crayon Syntax Highlighterプラグインの設定方法

  1. 「プラグイン > 新規追加」の検索機能で、「Crayon Syntax Highlighter」を検索し、インストール
  2. インストールしたプラグインを有効化

有効化して、左メニューの「設定 > Crayon」をクリックします。

特に何かする必要もありませんが、見た目を変えたい場合は、「テーマ」を変更します。

それから、「ツールバーの表示」を「常に表示」にし、「常にスクロールバーを表示する」にチェックを入れるのをしておくと、マウスオーバーなどした際にも画面が動かなくていいので、個人的にはこの設定がオススメです。

投稿時のコード挿入方法

通常の記事投稿欄の上部に「crayon」ボタンが追加されています。

そのボタンを押して、「コード」の部分に表示させたいコードを貼り付け、右上の「挿入」をクリックすると、記事欄に変換されたコードが挿入されます。

実際に画面で見てみると、コードがキレイに表示されているのが確認できます。