WordPressでソースコードを記事中に綺麗に表示させる方法

どうもザキオです。

WordPressでソースコードを記事中に入れようと思って、
そのままコードを貼ったら変な表示になったことはないでしょうか。

そこで、今回記事中にソースコードを
綺麗に表示させるプラグインについて解説します。

SyntaxHighlighter Evolvedというプラグインです。

設定方法をまとめました。

SyntaxHighlighter Evolvedの設定

まず、『プラグイン』⇒『新規追加』で
『SyntaxHighlighter Evolved』を検索して
インストールしたら有効化してください。

 

実際に使う前に設定を済ませておきます。

基本的にデフォルト設定のままでいいのですが、
僕は上記のように設定しています。

 

もし変更したい部分がありましたら
お好みに合わせて設定し直してください。

 

変更するとしたら『テーマ』か
『一般』の設定くらいだと思います。

『一般』の項目の意味は下記を参照ください。

 

• 行番号を表示する
  コードボックスの左側に行番号が表示される。

• ツールバーを表示する
  バージョン2の場合。
  ソースコードの右上にツールバーが表示されます。バージョン3の場合。
  ソースコードの右上にクレジットマークが表示されます。

• 自動リンクを有効にする
  ソースコードの中のURLに自動的にリンクを貼る。

• コードボックスの表示を閉じておく
  ソースコードが格納されて、
  クリックすると表示されるようにする。

• 軽い表示モードを使う
  上記で説明した行番号やツールバーが表示されなくなる。

• インデントタブを許容するスマートタブを使う
  ソースコード内でタブを使用する。

• 長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)
  長いソースコードは折り返しされ、
  横スクロールバーが表示されなくなる。

 

変更が終わったら、
『変更を保存』ボタンをクリックして終了です。

 

一応下の方にプレビューがあるので、
『変更を保存』ボタンを押したら
設定が反映されるようになっています。

記事中に表示する方法

やり方はソースコードを
[表記したい言語]と[/表記したい言語]で挟むだけです。

 

[表記したい言語]ここにソースコード[/表記したい言語]

といった感じです。

 

例えば、phpのコードを表示させたい場合は、
上記の『表記したい言語』の部分をphpに変更し、
ソースコードをくくれば下記のようになります。

 

'author' => '<p class="comment-form-author">' . '<label for="author">' . ( $req ? '<span class="required">*</span>' : '' ) . お名前 . '</label><br />' .
            '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',

 

以上、SyntaxHighlighter Evolvedの設定方法の説明でした。