【WordPress】ソースコードを美しく表示するプラグイン「Crayon Syntax Highlighter」の使い方

ソースコードを記事の中で表示したい時に、そのままだと読みづらく、デザイン的にも美しくありません。

WordPressでブログやメディアを運営している場合は、「Crayon Syntax Highlighter」というプラグインを使うことによって記事内にソースコードをきれいに表示することができます。

この記事では、「Crayon Syntax Highlighter」というプラグインを使ってソースコードを美しく表示する方法をご紹介しています。

Crayon Syntax Highlighterをインストールする

まず初めに、WordPressの管理画面からプラグインをインストールしましょう。検索ボックスに「Crayon Syntax Highlighter」と入力すると、一覧の中に表示されます。

Crayonのインストールが完了したら、下記のように記事の中のソースコードをpreタグで囲ってください。

また、preタグのクラス名にlang:htmlのようにして言語を指定することで、正しくハイライトされるようになります。

そうすると、下記のようにソースコードをきれいに表示することができます。

<?php

if( have_posts() ) :

while ( have_posts() ) : the_post();

<?php the_post_thumbnail(); ?>

</div>

</div>

</article>

</a>

<?php

endwhile;

endif;

デフォルト状態でもそれなりに整ったコードを表示することができますが、設定を変更することでさらに読みやすいソースコードを表示することができるようになります。

WordPress管理画面の「設定」→「Crayon」を開いて設定を変更しましょう。

Themesという項目を設定することで、テーマを変更することができます。

背景が暗いテーマを選択すると、Sublime Textのような雰囲気が出るので、それっぽく見せることができます。

Crayonは、ソースコードを表示する時のフォントやサイズを指定することができます。

デフォルト状態だと少し文字が小さいので、フォントサイズを14pxに、Line Heightを22pxくらいにしておくのがおすすめです。

そうすると、フォントサイズも読みやすいサイズになり、適度に行間も広くなるので可読性が向上します。

Crayon Syntax Highlighterには色々な機能があり、ソースコードを平文で表示したりコードの番号を表示することができますが、少し煩わしいので不要なものは外してしまいましょう。

参考までに、当サイトの設定内容を掲載しておきます。

Crayonの設定画面でもある程度表示のカスタマイズを行うことができますが、CSSで直接スタイルを当てることによって微調整を行うことができます。

ブラウザのデベロッパーツールなどでクラス名などを確認し、CSSファイルにスタイルを記述すれば反映されます。