SyntaxHighlighter Evolvedとは
記事上にソースコードを表示させるプラグインです。ブロックエディタにも対応していて、簡単にソースコードを記事上に表示できます。
Syntax Highlighter系のプラグインとして、Crayon Syntax Highlighterとともに有名です。7種類のテンプレートがあり、多くの言語に対応しています。
例
SyntaxHighlighter Evolvedのインストール
プラグインの新規追加で検索し、インストール、有効化まで済ませます。
- プラグイン新規追加よりSyntaxHighlighter Evolvedを検索
- インストールする
- 有効化する
新しいプラグインをインストールする前には、もしものためにバックアップしておきます。
SyntaxHighlighter Evolvedの設定
右側の項目設定より、「SyntaxHighlighter Evolved」を開きます。日本語ですのでわかりやすいと思います。
バージョンの選択
- バージョン3
ツールバーは表示されず、訪問者がマウスを利用してコピーする
長い行の場合は横スクロールバーが表示される - バージョン2
マウスオーバーでツールバーが表示される
行の折り返しが可能である
テーマ
7つのテーマから選べます。次の画像の一番上がデフォルトです。
他3種類のテーマがあります。
すべてのブラシを読み込む
ショートコードではなく、<pre>タグを使う場合、ビジュアルエディターで使う場合はチェックを入れます。
規定の設定
以下の設定はブロックエディタでソースコードを入力する際に設定できますが、設定画面でデフォルト値として設定も可能です。
一般
- 行番号を表示する
- ツールバーを表示する
- 自動リンクを有効にする
- コードボックスの表示を閉
- 軽い表示モードを使う
- インデントタブを許容するスマートタブを使う
- 長い行を折り返す（バージョン2のみ）横スクロールバーを無効にする
追加のCSSのclass名
classを指定できます。
行番号の開始と余白の指定
ソースコードの開始する番号や行番号の余白を指定します。
タブのサイズ
長さを指定します。
タイトル
コードボックスに表示されるタイトルを指定します。
プレビュー
上記の設定はプレビューで確認できます。
SyntaxHighlighter でソースコードを表示する
SyntaxHighlighter ブロックエディタを使う
- ブロックの追加 ̟⊕ をクリック
- フォーマットよりSyntaxHighlighter を選択
- ソースコードを記述する
- エディタでの設定
SyntaxHighlighter エディタでの設定
- 行番号の表示の有無
- 最初の行の番号設定
- ハイライト協調する行番号の入力
- URLのクリック可能にするか否か
- 高度な設定（追加CSS）
以上のようにブロックエディタを利用して簡単にソースコードを表示できます。
ショートコードを使う
投稿編集画面でテキストエディッタで表示してショートコードを記入します。
| CSSのソースの場合 | [css］[/css］ |
| HTMLのソースの場合 | [html］[/html］ |
| PHPのソースの場合 | [php］[/php］ |
例
ソースコードを表示するプラグイン
SyntaxHighlighter Evolved以外にもソースコードを表示するプラグインがあります。Crayon Syntax Highlighterです。Crayon Syntax Highlighterも、記事上にソースコードを綺麗に表示するプラグインで、Syntax Highlighter系のプラグインとして、SyntaxHighlighter Evolvedとともに有名です。
Crayon Syntax Highlighterの設定の仕方は以下に記載しています。
プラグインを利用せず、見やすい表示をする方法
ソースコードを見やすく表示するために、オンラインでHTMLとして出力する ツールがあります。
