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」を同居させるには はコメントを受け付けていません