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の設定方法の説明でした。