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


この記事は約 4 分で読めます。

1oD11Js
どうもザキオです。

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





メルマガ寺子屋での実績者増加中

ネットビジネス 副業

メルマガ登録

ネットビジネス副業の成功手順へ戻る

2件のコメント

  • こんなプラグインがあるんですね。参考になりました。

    応援しておきました。ポチッ

    • zakio

      矢田さんコメントありがとうございます!

      けっこうユーザビリティが向上するのでオススメですよ。

      ポチもありがとうございました!

コメントを残す