ソースコードを綺麗に表示させる おすすめプラグイン

WordPressのテーマのカスタマイズについての記事を書く場合、ソースコードをご紹介したいときがあります。
そこでソースコードを超かんたん・綺麗に表示してくれるプラグインをご紹介します。

ソースコードを表示してくれるプラグインはたくさんあるのですが、おすすめはCrayon Syntax Highlighter(クレヨン シンタックス ハイライター)です。

Crayon Syntax Highlighter
(クレヨン シンタックス ハイライター)

このプラグインがおすすめな理由

  • WordPressの管理画面から導入できる
  • 日本語対応
  • 行数表示、折り返し、ハイライトなどのオプションが柔軟に設定できる
  • 操作方法がシンプルで使いやすい
  • 見た目がいい

ソースコードの表示例(画像)

導入すると、このようにソースコードが表示できます。

Crayon Syntax Highlighter(クレヨン シンタックス ハイライター)の使い方

1.インストールする

WordPressの管理画面から検索してインストールします。
WordPress管理画面>プラグイン>新規追加>「Crayon Syntax Highlighter」で検索。
インストールして有効化。

2.設定をする

デフォルト設定のままでも問題なく使えます。
設定を変えたい場合は、
WordPress管理メニューの設定 > Crayon を選択して設定画面から行ってください。

3.記事内にソースコードを挿入

記事にソースコードを埋め込む操作はとても簡単です。
記事作成のエディタが「ビジュアル」になっている場合は「テキスト」へ

メニューボタンから「crayon」をクリック

「crayon」ボタンをクリックすると、ソースコードを挿入するエディタが現れます。

この画面で挿入するソースコードの設定を行います。

まずは、タイトル・プログラム言語・コードを入力します。

  • タイトル:コードの内容について任意でタイトルを付けることができます。
  • プログラム言語:表示させるコードの種類を選択します。DefaultのままでもOKです。
  • コード:表示したいソースコードを入力します。

他にも表示デザイン、フォントの種類やサイズなども詳細設定することが可能です。
各項目を入力したら右上の「挿入」をクリックします。
これで記事内にソースコードが追加されます。


記事を公開すると設定に沿ったソースコードが表示されます。

一度挿入したソースコードを編集するには?

ビジュアルエディタから編集したいソースコードの部分をクリックし、このメニューボタンをクリックします。
Crayon Syntax Highlighterの編集画面が表示されます。
編集が終わったら「更新」ボタンをクリックします。