WordPressでソースコードをハイライト表示する

WordPressでソースコードをハイライト表示するには、やっぱりプラグインです。
WordPressの場合は、機能の追加は、プラグインあるいはテーマのいずれかでしか提供されませんから、やっぱりプラグインです。
この点では、Joomla!は、モジュールとプラグインのすみわけがある分、後々、管理が楽になります。
（最初は、そのすみわけを理解する必要がありますが・・。）

今回、ご紹介するのは、WP-Syntaxというプラグインです。

このプラグインは、GeSHiを使ったプラグインで、非常に、よくできています。(GeSHiは、phpを使ったコードハイライターライブラリです。)
今のところベータ版ではあるようですが、筆者には、特に問題らしいものは確認できませんでした。
ダウンロード先は、http://wordpress.org/extend/plugins/wp-syntax/です。

早速、使ってみましょう。

インストールは、通常のプラグイン同様、[プラグイン]-[新規追加]-[アップロード]から、先のダウンロード先からダウンロードしたZIPファイルを指定して、インストールします。
インストール後、プラグインを有効にします。

あとは、記事の中にコードを埋め込んで使用します。

以下は、使い方の例です。例 1: PHP, 行番号なし

<pre lang="php">
<div id="foo">
<?php
  function foo() {
    echo "Hello World!\n";
  }
?>
</div>
</pre>

見え方

<div id="foo">
<?php
  function foo() {
    echo "Hello World!\n";
  }
?></div>

例 2: Java, 行番号あり

<pre lang="java" line="1">
public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}
</pre>

見え方

1
2
3
4
5

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

例 3: Ruby, 行番号あり（開始行番号18行目を指定）

<pre lang="ruby" line="18">
class Example
  def example(arg1)
    return "Hello: " + arg1.to_s
  end
end

</pre>

見え方

18
19
20
21
22

class Example
  def example(arg1)
    return "Hello: " + arg1.to_s
  end
end

例 4: html エスケープコードを使う場合、オプションにescaped="true" 指定すると正しく表示できます。

<pre lang="xml" escaped="true">
&lt;xml&gt;Hello&lt;/xml&gt;
</pre>

見え方

<xml>Hello</xml>

この記事を読んだ人は、こんな記事も読んでいます。:

• WordPressで画像をLightbox(LightView)風に表示する
• WordPressの記事の中でPHPを動作させる
• WordPressでGoogle Analyticsを使うには
• WordPressでサイトを国際化する(qTranslate)
• WordPressのコメントスパム対策

コメントをどうぞ