【更新】Crayon Syntax Highlighterで記事上にソースコードを表示する

Crayon Syntax Highlighterとは

ブログの記事にソースコードを表示させるプラグインです。このプラグインを使うとHTML、CSS、PHPやJavaScript、46種類の言語に対応しており、とても見やすく表示できます。ブログでHTMLやCSSなど説明する方に最適で、多くの人が利用しているプラグインです。記事を編集するエディッタにCrayonのボタンが追加され、簡単に記事上に表示できます。

例

Crayon Syntax Highlighterをインストール

1. プラグインの新規追加でCrayon Syntax Highlighterを検索
2. インストール
3. 有効化

プラグインの新規追加で検索し、インストール、有効化まで済ませます。

Crayon Syntax Highlighterの設定

ダッシュボードの設定右側の項目より、「設定」を選び、「Crayon Syntax Highlighter」をクリックします。日本語化されているのでわかりやすいと思います。まずテーマ、フォント、フォントサイズを選びます。デフォルトではツールバーはマウスオーバーで表示されるようになっています。テーマは58種類で、文字は14種類あります。

テーマを選ぶとプレビューがありわかりやすい

これらの設定は投稿画面でソースコードを記入する際にも設定できます。

ソースコードを表示する

投稿画面のテキストエディッタを開くとCrayonのボタンがあります。それをクリックします。ソースを貼るだけで簡単に表示できます。諸々の設定はページ毎の設定も可能です。

Crayonボタンがあります。

コードを記載します。

この時にも諸々の設定ができます。

記載例です。

ソースコードを表示するプラグイン

Crayon Syntax Highlighter以外にもソースコードを表示するプラグインがあります。SyntaxHighlighter Evolvedです。SyntaxHighlighter Evolvedは、記事上にソースコードを綺麗に表示するプラグインで、Syntax Highlighter系のプラグインとして、Crayon Syntax Highlighterとともに有名です。

SyntaxHighlighter Evolvedの設定の仕方は以下に記載しています。