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など機会があれば積極的に使っていきたいと思います∩( ´∀`)∩ヨロシク♪


ABOUTこの記事をかいた人

雑記ブロガー。月間18万人に読まれる「働く君に花束を!」運営者。職場で無視されいじめにあったので『対会社、ハラスメント、仕事ネタ』について記事を書くようになりました。 内向型のポジティブヤロウです。

▼詳しくはこちらをクリック&タップ
プロフィール詳細 / お問い合わせ