SyntaxHighlighter

2008 年 10 月 14 日 – 10:33 PM | by snow |

WordPressのプラグインの紹介の続きって事で、今日は先日導入したSyntaxHighlighterです。記事内にソースを書く時に分かりやすく色分けしてハイライトしてくれます。
codeタグやpreタグってうまく動かないんだけど何か使い方違ってるんだろか・・・

- 導入方法 -

wordpress.orgのプラグインのページからSyntaxHighlighterをダウンロード
（2008/10/14現在のVer. 1.1.1）
解凍して/wp-content/plugins/にアップロード
Activateして完了

と思いきや動かん！また英語かと思いつつ、上記のダウンロードページを眺めているとFaqのページに

Make sure your theme’s footer has ＜?php wp_footer(); ?> somewhere in it, otherwise the JavaScript highlighting files won’t be loaded.

なんて事が書いてありました。
使っているテーマのフッターに＜?php wp_footer(); ?>が無いとスクリプトがお仕事してくれませんよって事みたい。/wp-content/themes/使用するテーマのディレクトリ/footer.phpを確認すると無いようなので、＜/body>の直前に追加しておきました。
（上記のコードは初めの括弧は全角にしてあります。）

<?php wp_footer(); ?>
</body>
</html>

これでいいかな～と思ったらまだ問題が！専用のタグで囲んだ中はリストタグで整形されているようで、それがテーマによっては都合が悪いんです。
結構そうゆうテーマ多いんじゃないかなって思うんですが、CSSでlist-style-typeがnoneにしてあって、マーカーは背景で指定してある場合。各行の先頭に背景のマーカーが出ちゃうんですね～。
どうしよっかなと思いつつ色々触るのも面倒なので、/wp-content/plugins/syntaxhighlighter/files/SyntaxHighlighter.cssの中身に１行だけ追加。

.dp-highlighter ol li, .dp-highlighter .columns div {
	list-style: decimal-leading-zero;
	list-style-position: outside !important;
	border-left: 3px solid #6CE26C;
	background:none;/*←この１行だけ追加 */
	background-color: #F8F8F8;
	color: #5C5C5C;
	padding: 0 3px 0 10px !important;
	margin: 0 !important;
	line-height: 14px;
}

無事動いているので、問題ないかな。いい感じです。