WP-Syntaxを導入してみた
2014-07-02

技術関連の記事を書こうとするとどうしてもコードの内容に応じてシンタックスハイライトしてほしくなります。 そこでいくつか検討したんですが WP-Syntax を導入することにしました。

理由(メリット)は単純にWordPressで完結できるからです。 クライアント側で読み込むライブラリが減らせるのは嬉しいですね。ライブラリの読み込みに対するフォールバック処理を書かなくていいし。

逆にデメリットはWordPress(PHP)以外で動作しないので、動作しないブログへ引っ越そうと思ったら関連する記事を書き換える必要があるってことです。

あとサーバー側の負荷が多少増えるかもしれません。

WP-Syntaxの導入

さっそくインストールしてみます。

プラグインのインストール画面から syntax で検索すると出てくるのでインストールします。以上。

01-1

使用方法

シンタックスハイライトを適用するためには pre タグで対象のコードを囲います。

<pre lang="html4strict" line="1" escaped="true" highlight="3,5" src="http://note.crohaco.net/wordpress-syntax-highlighter/">
<html>
 <body id="foo">
  <div class="bar">test</div>
 </body>
</html>
</pre>

書き方が間違っていなければ 以下のように表示されるはずです

01-2

警告

現在このブログは WordPress で動いていないためこのようには表示されません

オプションは pre タグの属性に指定することができます。READMEを読む限りでは以下のオプションが指定できそうです。

オプション 説明
lang (必須属性) 対象のコードの種類を指定する。PHPなら「php」XMLなら「xml」といった具合。ただしhtmlの場合は「html4strict」と指定する必要があるらしい。対応表がほしいところ。
line 開始行数を指定する。指定しないと行数自体が表示されない。
escaped (初期:false) 実体参照を変換して表示するか否かを「true/false」で指定する。preの閉じタグはこのオプションを有効にして &lt;/pre&gt; とすれば表現できる。
highlight 目立たせたい(ハイライト)行を数値で指定する。複数行指定したい場合は「,」で区切る。
src 対象コードのソースを指定する。引用や参照といった用途で使うと思われる

これでやっと備忘録が書ける環境が整いました。