コードをハイライトしてくれるWP-Syntax

以前に書いたとおり、WordPressのバージョンが上がったせいか、使えなくなったプラグインがちらほら。 当blog（Underground Movement）はWEB関連のブログ（一応）ですので、コードハイライトのプラグインは必須。。。 なのですが、2.7以上では使えなくなっているものが多いようです。

たとえば、「SyntaxHighlighter Plus」は有名なプラグインのようですが、JavaScriptファイルを読込めなくなってしまっているようです。
直接index.phpなどにJavaScriptファイルを読込めば動くようになりましたが、「それではプラグインの意味がないんでは？」と思ったので、他になんかないだろかーとねばっていたところ、WP-Syntaxというプラグインを見つけました。

導入はいたって簡単で、ダウンロードしたフォルダをプラグインフォルダにアップロード。
管理画面でプラグインを有効にするだけ。

あとは記事を書くときに<pre lang=”php” line=”1″> hoge </pre>のように記述すればいいだけです。”php”にはお好きな言語を。”1″には始めたい行数を指定してください。

CSSだけは結局テンプレートで使っているCSSのほうに記述せよみたいなことが説明されていたので、”/wp-syntax/wp-syntax.css”の記述を自分のテンプレートのCSSに移植。
ついでにいろいろ変えてみたのが以下の記述です。

.wp_syntax {
  background-color: #f9f9f9;
  margin: 1em 0 1em 0;
  width: 90%;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  padding:5px 0;
}
.wp_syntax table {
  border-collapse: collapse;
  width:100%;
}
.wp_syntax td {
  vertical-align: top;
  padding: 2px 6px;
  line-height: 1.4;
}
.wp_syntax .line_numbers {
  text-align: right;
  width:1em;
  color:#669999;
}
/* potential overrides for other styles */
.wp_syntax pre {
  line-height: 1.4;
}

さっそく使ってみました。
かなり満足です！

| 2008年12月16日 16:29 | WordPress | コメント＆トラックバック（0）