【入れるだけ】投稿記事中のコードをキレイに表示！『Crayon Syntax Highlighter』はシンタックスハイライトをかけるプラグイン

WordPressの投稿記事中のコードをキレイに表示できるプラグイン「Crayon Syntax Highlighter」ご紹介します。

Crayon Syntax Highlighter とは

投稿記事中にPHPやHTMLなどのソースコードを載せるとき、通常はコード部分をcodeタグ・preタグで囲みますよね。このタグで囲むとコード部分がある程度見やすくはなりますが（※）、プログラミング用のテキストエディタのようにキーワードに色を付ける「シンタックスハイライト」ほどのわかりやすさはありません。

Crayon Syntax Highlighterプラグインを使うと、PHP・HTMLをはじめ様々なプログラミング言語のコードにシンタックスハイライトがかかるため、コードをわかりやすくキレイに見せることができます。

※）見え方は使っているテーマによって異なります。

PHPやHTMLなどのソースコードをシンタックスハイライト

Crayon Syntax Highlighterがインストール・有効化されていると、PHPやHTMLなど様々なソースコードがシンタックスハイライトされて表示されます。具体的にどう見栄えが変わるかは、以下の比較をご覧ください。違いが一目瞭然です。（使用テーマはTwentyFourteen）

プラグイン使用前：codeタグ・preタグのみ

Crayon Syntax Highlighterを使わない状態では以下のような見え方です。

通常の文章と見た目があまり変わりませんね。

プラグイン使用後：Crayon Syntax Highlighterによるシンタックスハイライト適用後

Crayon Syntax Highlighterを有効化すると、以下のようにシンタックスハイライトがかかります。

こちらの方が断然コードが読みやすいですね。

このようにシンタックスハイライトでわかりやすくしてくれるのが、このプラグインの特長です。

使い方

1. インストール〜有効化

Crayon Syntax Highlighterプラグインをインストールして有効化します。

2. ソースコードがシンタックスハイライトされる

Crayon Syntax Highlighterプラグインを有効化していると、codeタグ・preタグで囲まれたソースコードに自動的にシンタックスハイライトがかかります。

※行番号の指定など管理画面から色々と設定することもできますが、特に何もしなくてもシンタックスハイライトが適用されるようになります。

ひとこと

プログラミング技術に関連したブログやWebサイトでは、記事中にコードを掲載することも少なくないのではないでしょうか？このプラグインを入れておくと、カンタンにシンタックスハイライトがかけられて便利ですよ。ブログ・Webサイトは「見る人に優しく」が基本ですから、読み手のことを考えてCrayon Syntax Highlighterを導入してみてはいかがでしょうか？

Crayon Syntax Highlighter

ジャンル：管理画面 > 投稿ページ

概要：ソースコードをシンタックスハイライトして表示してくれるプラグイン