WordPressの記事内にソースコードをキレイに表示できるプラグイン「Crayon Syntax Highlighter」

HTMLやCSSなどのソースコードをWordPressの記事内にキレイに表示したいと思うことがあると思います。

「整形済みテキスト」でもソースコードを表示できますが、より見やすく細かい設定までできる「Crayon Syntax Highlighter」を使うとよりキレイに表示させることがデキます。

プラグインの特徴

  • さまざまなプログラミング言語のソースコードを記事内にキレイに挿入できる

プラグインのダウンロード

プラグインのダウンロードは下記のリンク先からもできますしWordPress内で「Crayon Syntax Highlighter」と検索してもダウンロードが可能です。現在のバージョンは「2.8.4」。

Crayon Syntax Highlighter
Crayon Syntax Highlighter
Developer: Aram Kocharyan
Price: Free

プラグインの使い方

管理画面の場所

「設定」>「Crayonという欄が表示されます。

crayon1

こちらをクリックすると詳細設定ができますが、特にどこも変更することなくデフォルトで利用できます。

プラグインの設定

投稿ページのテキストモードにすると、「Crayon」という項目が出てくるのこちらをクリックします。

crayon2

ビジュアルモードの場合は下図赤枠の「<>」この記号です。

crayon-2

挿入するソースコードにタイトルを入力し、ソースコードの部分に挿入したいコードを記述します。

crayon3

細かい設定をしたい場合は、詳細設定から任意で設定が可能です。

決定して、「挿入」をクリックすると次のようにソースコードがキレイに挿入されます。

crayon4

下記の言語に対応しています。

crayon5

使ってみた感想のまとめ

整形済みテキストでの表示よりもよりわかりやすくキレイにソースコードを表示できるので、よくソースコードを挿入する記事を書くような方は利用するといいですね。

最新の更新を
プッシュ通知で購読しよう