SyntaxHighlighter Evolved

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


スポンサーリンク

SyntaxHighlighter Evolvedとは

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

SyntaxHighlighter Evolved

スポンサーリンク

SyntaxHighlighter Evolvedのインストール

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

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

スポンサーリンク

SyntaxHighlighter Evolvedの設定

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

SyntaxHighlighter Evolved

バージョンの選択

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

設定

テーマ 7つのテーマ
ブラシを読み込む ビジュアルエディターで使う時はチェックを入れます。

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

一般設定
  • 行番号を表示する
  • ツールバーを表示する
  • 自動リンクを有効にする
  • コードボックスの表示を閉 軽い表示モードを使う
  • インデントタブを許容するスマートタブを使う
  • 長い行を折り返す(バージョン2のみ)横スクロールバーを無効にする
追加のCSSのclass名 classを指定できます
行番号の開始 ソースコードの開始する番号を指定します。
行番号の余白 余白s指定します。
タブのサイズ 長さを指定します。
タイトル コードボックスに表示されるタイトル

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

SyntaxHighlighter Evolved

CSSのソースの場合 [css][/css]
HTMLのソースの場合 [html][/html]
PHPのソースの場合 [php][/php]

SyntaxHighlighter Evolved

表示例

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

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

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

Crayon Syntax Highlighterで記事上にソースコードを表示する
Crayon Syntax Highlighterとは ブログの記事にソースコードを表示させるプラグインです。このプラグインを使うとHTML、CSS、PHPやJavaScript