WordPressでコードを綺麗に表示する「Crayon Syntax Highlighter」

ソースコードの埋め込み

ソースコードを記事に埋め込みたい場合、プラグイン等を入れていないとすごく質素な感じになってしまいます。

また、様々な言語によってシンタックスハイライトが異なるので、それを自前で表現するのはとても大変です。

そんな方のためのプラグイン、もちろんWordpressに用意されていますよ！！笑

今回は、「Crayon Syntax Highlighter」というWordpressプラグインをご紹介致します♪

Crayon Syntax Highlighterプラグインは、記事の中でソースコードを綺麗に表示してくれます。

また、様々な言語に対応しており、40種類以上の言語に合わせてシンタックスハイライトをサポートしてくれます！

プラグイン>新規追加を選択し、キーワードに「Crayon」と入力すると、「Crayon Syntax Highlighter」プラグインがヒットすると思うので、今すぐインストールボタンをクリックします。

インストールが完了すると、有効化ボタンに変わるのでクリックします。

設定の中に、Crayonメニューが追加されていれば有効化が完了です。

設定>Crayonの中でエディターの細かい設定は可能ですが、デフォルトのままで使えるので今回はデフォルトのままで進めていきます。

記事編集エディタのボタン群の中に、crayonボタン」が追加されていると思うのでクリックします。

専用の入力ダイアログが表示されるので、ソースコードと、対応する言語を入力し、右上のaddボタンをクリックします。
※HTMLの場合はDefaultのままで良いです。

そうすると以下のようになります。

<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <div>
      <p>本文</p>
     </div>
  </body>
</html>

JavaScriptはこんな感じ

function closewin() {
	var name = "hoge";
	window.close(name);
}

CSSはこんな感じ

p {
    text-align: center;
    color: red;
}

良い感じですね♪

今回はデフォルトの設定で紹介してみましたが、細かい設定で見た目もカスタマイズ出来ますので、自分好みのコードエディターに設定してみてください♪