10月
25
2010
WordPressのプラグイン「WP HatenaNotation」と「SyntaxHighlighter2」を同居させるには
投稿者: miztaka, カテゴリ: WordPress, tags: hatena, syntaxhighlighter, wordpress概要
今週からWordPressと格闘しています。主に技術情報をまとめるブログにしたいので、これまで慣れているはてな記法とコードを美しく見せるためのSyntaxHighlighterをプラグインで導入したいと思っていました。いろいろと試行錯誤してみた結果、
- 「WP HatenaNotation」と「SyntaxHighlighter2」をそれぞれインストールして有効化
- コードを書くときははてなのスーパーpre記法で書く
ことで望みどおりの結果を得られました。
※2010/10/28 追記:いろいろ弄っているうちにはてなのスーパーpreで書いたときにSyntaxHighliter2のJavascriptエラーが発生するようになってしまいました。結局、「はてな記法の設定」から「WordPressの改行を使用する」を「はい」に変更したところ、SyntaxHighlighter2の記法でいけるようになりましたので今はそちらを使ってます。
はてなのスーパーpre記法でコードを書いた場合
記法
>|php|
public function serializeField($entity, $fields, $json=FALSE) {
foreach($fields as $field) {
if (! Teeple_Util::isBlank($this->$field)) {
$entity->$field = $json ?
json_encode($this->$field) : serialize($this->$field);
} else {
$entity->$field = NULL;
}
}
return;
}
||<
表示
public function serializeField($entity, $fields, $json=FALSE) {
foreach($fields as $field) {
if (! Teeple_Util::isBlank($this->$field)) {
$entity->$field = $json ?
json_encode($this->$field) : serialize($this->$field);
} else {
$entity->$field = NULL;
}
}
return;
}
このように期待通りに表示されました。
おそらく動作原理は以下のようになっていると思います。
- WP HatenaNotationが >|php| ~ ||< までを
<pre class="brush: php;"> ~ </pre>
に変換。
- SyntaxHighlighter2が pre内をハイライト。
次はSyntaxHighlighter2の記法でやってみた場合の失敗例です。
SyntaxHighlighter2でのハイライト
記法
[ code="php" ]
public function serializeField($entity, $fields, $json=FALSE) {
foreach($fields as $field) {
if (! Teeple_Util::isBlank($this->$field)) {
$entity->$field = $json ?
json_encode($this->$field) : serialize($this->$field);
} else {
$entity->$field = NULL;
}
}
return;
}
[ /code ]
表示
public function serializeField($entity, $fields, $json=FALSE) {
foreach($fields as $field) {
if (! Teeple_Util::isBlank($this->$field)) {
$entity->$field = $json ?
json_encode($this->$field) : serialize($this->$field);
} else {
$entity->$field = NULL;
}
}
return;
}
このように<p>タグが入ってしまいます。。恐らくWP HatenaNotationが悪さをして <p>タグを入れてしまっているものと思われます。
参考
WordPressのプラグイン「WP HatenaNotation」と「SyntaxHighlighter2」を同居させるには はコメントを受け付けていません

エントリ (RSS)