スポンサード

SyntaxHighlighter 自体はプラグインを利用せずともWordPressに組み込む事は可能ですが、設置が少々面倒なのでプラグイン化された SyntaxHighlighter Evolved を使うと楽です。

SyntaxHighlighter Evolved だと行番号の表示非表示の設定やデザイン面はすべて管理画面で制御できますので、プラグインを有効化して簡単な設定をするだけで、あとはハイライトさせるソースコードを

[[php][/php]]
[[css][/css]]
[[html][/html]]

などとショートコードで挟めば動きます。

SyntaxHighlighter Evolved プラグインのインストール

管理画面のプラグイン新規追加画面よりSyntaxHighlighter Evolved を検索するか、以下のサイトよりプラグインファイルをダウンロードします。

SyntaxHighlighter Evolved の基本設定

WordPress管理画面の左メニュー「設定」から「SyntaxHighlighter の設定」ページへ移動します。

「SyntaxHighlighterのバージョン」はデフォルトの「Version 3.x」のままで良いです。


「テーマ」は色々ありますが、ページ中段の「変更を保存」ボタンをクリックすることで、その下のプレビュー画面が切り替わります。

例えば、デフィルトの「Default」を選べばこんな画面。


「Django」を選べばこんな画面です。

SyntaxHighlighter Evolved の規定の設定

続いて「規定の設定」ですが、個人的には
で動かしていますが、設定はお好みで。


「追加のCSSのclass名(複数可能)」以降はオプションでお好みで設定ください。

ショートコードパラメータ

SyntaxHighlighter 設定ページ下部には「ショートコードパラメータ」の例が掲載されています。

基本的には[[php]]、[[css]]、[[html]]と書くだけでコードがハイライトされますが、独自のクラスを付けている場合には、[[php classname=”hogehoge”]]などとパラメータを追加できます。

SyntaxHighlighter Evolved 利用上の注意点

SyntaxHighlighter Evolved プラグインをインストールしても正常に動かない場合は、別途[WP]ソースコードをハイライトできるWordPressプラグイン「SyntaxHighlighter Evolved」が動かない場合の対処法の記事を参考にしてみてください。

スポンサード