WordPressでソースコードをブラウザ表示させるプラグインが便利♪

今さらですがWordPressソースコード表示させるプラグインを導入しました。

よくブロガーさんが使ってるやつで僕も記事でソースコードを表示する時に同じようにしたいなーって思ってたんです。

で、そのプラグインというのがこれ、SyntaxHighlighter Evolvedというやつです。

行数表示できます。ソースコードをこのように表示できます。

$x = 10;

if($x <= 10){

  echo"$xは10以下です。";

}

SyntaxHighlighter Evolvedのダウンロード

SyntaxHighlighter Evolvedダウンロードはプラグインの新規追加で行いました。

SyntaxHighlighter

ダウンロード後インストールします。インストールしたら必ずプラグインを有効にしないと作動しません。(当然ですね(〃ω〃))

使い方

エディタの中に次のように記述します。
SyntaxHighlighter
するとこのような表示になります。


<p>こんにちは</p>

<p>よろしく</p>

注意点はブラケットと呼ばれる[ ]というカッコ。これは必ず半角にすること!

  • 開始と終了で[ ]を記述
  • [ ]は必ず半角

表示をカスタマイズ

1:バージョンは選択可能
設定画面で切り替え可能です。

SyntaxHighlighter
Version2.XやVersion3.Xなど選択できます。

2:開始行数を指定
SyntaxHighlighter

87行目から開始します。


<p>僕は福岡市在住です。</p>

<p>AB型で水瓶座です。</p>

<p>好きな食べ物はラーメンと明太子です。</p>

<p>好きな言葉は「為せば成る。為さねば成らぬ何事も。成らぬは人の為さぬなりけり。」</p>

3:さらにハイライトを指定

SyntaxHighlighter
89行目と91行目にハイライトが入ります。


<p>僕は福岡市在住です。</p>

<p>AB型で水瓶座です。</p>

<p>好きな食べ物はラーメンと明太子です。</p>

<p>好きな言葉は「為せば成る。為さねば成らぬ何事も。成らぬは人の為さぬなりけり。」</p>

まとめ

前から気になってはいたプラグインだったのですが、なかなか記事にする機会がありませんでした。今回は稚拙ながら投稿させてもらいました。

実際に表示を見るとわかりやすくいいなぁーって感じます。

こらからカスタマイズやHTML・CSS・PHPなど機会があれば積極的に使っていきたいと思います∩( ´∀`)∩ヨロシク♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*