技術関連の記事を書こうとするとどうしてもコードの内容に応じてシンタックスハイライトしてほしくなります。
そこでいくつか検討したんですが WP-Syntax を導入することにしました。
理由(メリット)は単純にWordPressで完結できるからです。 クライアント側で読み込むライブラリが減らせるのは嬉しいですね。ライブラリの読み込みに対するフォールバック処理を書かなくていいし。
逆にデメリットはWordPress(PHP)以外で動作しないので、動作しないブログへ引っ越そうと思ったら関連する記事を書き換える必要があるってことです。
あとサーバー側の負荷が多少増えるかもしれません。
WP-Syntaxの導入
さっそくインストールしてみます。
プラグインのインストール画面から syntax
で検索すると出てくるのでインストールします。以上。
使用方法
シンタックスハイライトを適用するためには 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>
書き方が間違っていなければ 以下のように表示されるはずです
- warning
- 現在このブログは WordPress で動いていないためこのようには表示されません
オプションは pre
タグの属性に指定することができます。READMEを読む限りでは以下のオプションが指定できそうです。
- オプション
- 説明
- lang(必須属性)
- 対象のコードの種類を指定する。PHPなら「php」XMLなら「xml」といった具合。ただしhtmlの場合は「html4strict」と指定する必要があるらしい。対応表がほしいところ。
- line
- 開始行数を指定する。指定しないと行数自体が表示されない。
- escaped
- 実体参照を変換して表示するか否かを「true/false」で指定する。
- preの閉じタグはこのオプションを有効にして
</pre>とすれば表現できる。 - 初期値は
false
- highlight
- 目立たせたい(ハイライト)行を数値で指定する。複数行指定したい場合は「,」で区切る。
- src
- 対象コードのソースを指定する。引用や参照といった用途で使うと思われる
これでやっと備忘録が書ける環境が整いました。