今回はWordPressブログにソースコードを綺麗に表示させるプラグイン『Crayon Syntax Highlighter』の使い方を解説していきます。

僕は普段は仕事でプログラミングをガリガリ書いているのですが、WordPressにコードを貼り付けると、あれっ？ってな感じで残念な表示になってしまいます。

ソースコードをきれいに表示するには、インデントやカラーなどの表示が必要です。

今回紹介するCrayon Syntax Highlighterは、僕のようなプログラマーやそうでない方にも、すごくソースコードが見やすくしてくれる有り難いプラグインです。

Crayon Syntax Highlighterプラグインを使うメリット

WordPressにそのままソースコードを書いて公開すると、とても見づらい表示になってしまいます。

プログラム言語のソースコードは、インデントと言われる空白とプログラム言語の予約後によるカラー表示することで、格段に認識性が上がります。

Crayon Syntax Highlighterのインストール方法

WordPressのダッシュボードの「プラグイン」→「新規追加」をクリックします。

プラグインの検索ボックスに「Crayon Syntax Highlighter」と入力して検索すると、キーワードに合致したり類似するプラグインが全て表示されます。

その中で上記画像のプラグインの「今すぐインストール」ボタンをクリックします。

インストールが終わると、ボタンが「有効化」に変わるので、青くなったボタンをクリックします。

SyntaxHighlighter Evolved が有効化され、「インストール済みプラグイン」の画面が表示されます。

プラグインのメニューをクリックして、プラグインの一覧を見ると、Crayon Syntax Highlighterが有効化された状態で表示されています。

WordPressプラグインの詳しいインストール方法については、

「WordPressプラグインについての基礎とインストール方法」を参照してください。

Crayon Syntax Highlighterの設定方法

①Theme

②Font

③Metrics

④Toolbar

⑤Lines

⑥Code

⑦Tags

⑧Languages

⑨Files

⑩Posts

⑪Tag Editor

⑫Misc

⑬Errors

⑭Log

Crayon Syntax Highlighterの使い方

プラグインのインストールが完了すると、投稿ページにソースードを埋め込むためのアイコンが表示されているので、それをクリックします。

クリックすると、Crayon Syntax Highlighterのソースコード埋め込み画面が表示されます。

Language項目のプルダウンメニューで、埋め込みたいソースコードの言語を選択します。

Codeにプログラムコードを書き込み、もしくはコピペします。

ポップアップしているCrayon Syntax Highlighterの画面上部にあるAddボタンをクリックします。

この状態で、記事の公開もしくは下書き保存ボタンをクリックして更新をします。

まとめ

技術系の記事をWordPressで書いていると、どうしてもソースコードを記事内に貼り付ける機会が多くなります。

サイトを訪れる人が記事を見たときに、ソースコードが見やすいと『このサイトは良いサイトだな』と思ってもらえるようになるので、

ソースコードをブログに記述することが多い方は、ぜひCrayon Syntax Highlighterプラグインをインストールすることをオススメします。