• RSS

[WP]ソースコードをハイライトできるWordPressプラグイン「SyntaxHighlighter Evolved」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

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

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

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


SyntaxHighlighter Evolved の基本設定

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

「SyntaxHighlighterのバージョン」はデフォルトの「Version 3.x」のままで良いです。
[WP]ソースコードをハイライトできるWordPressプラグイン「SyntaxHighlighter Evolved」

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

例えば、デフィルトの「Default」を選べばこんな画面。
[WP]ソースコードをハイライトできるWordPressプラグイン「SyntaxHighlighter Evolved」

「Django」を選べばこんな画面です。
[WP]ソースコードをハイライトできるWordPressプラグイン「SyntaxHighlighter Evolved」

SyntaxHighlighter Evolved の規定の設定

続いて「規定の設定」ですが、個人的には
・「行番号を表示する」にチェック
・「長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)」にチェック
で動かしていますが、設定はお好みで。
[WP]ソースコードをハイライトできるWordPressプラグイン「SyntaxHighlighter Evolved」

「追加のCSSのclass名(複数可能)」以降はオプションでお好みで設定ください。
[WP]ソースコードをハイライトできるWordPressプラグイン「SyntaxHighlighter Evolved」

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

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

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

SyntaxHighlighter Evolved 利用上の注意点

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください