【更新】SyntaxHighlighter Evolvedで記事上にソースコードを表示する

SyntaxHighlighter Evolvedとは

記事上にソースコードを表示させるプラグインです。Syntax Highlighter系のプラグインとして、Crayon Syntax Highlighterとともに有名です。7種類のテンプレートがあり、多くの言語に対応しています。

例

SyntaxHighlighter Evolvedのインストール

1. プラグイン新規追加よりSyntaxHighlighter Evolvedを検索
2. インストールする
3. 有効化する

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

SyntaxHighlighter Evolvedの設定

ダッシュボードの設定右側の項目より、「設定」を選び、「SyntaxHighlighter Evolved」を開きます。日本語ですのでわかりやすいと思います。

バージョンの選択

• バージョン3
  ツールバーは表示されず、訪問者がマウスを利用してコピーする
  長い行の場合は横スクロールバーが表示される
• バージョン2
  マウスオーバーでツールバーが表示される
  行の折り返しが可能である

設定

以下の設定はソースコードを入力する際に設定できますが、設定画面でデフォルト値として設定も可能です。

SyntaxHighlighter Evolvedでソースコードを表示する

投稿編集画面でテキストエディッタで表示してショートコードを記入します。

表示例

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

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

Crayon Syntax Highlighterの設定の仕方は以下に記載しています。