syntaxhighlighterとは、ブログでソースコードを綺麗に表示させるためのツール。
WordPressには、syntaxhighlighterを利用するためのプラグインが多数ある。

今回は、普段使っている Windows Live Writerのプラグイン
『Windows Live Writer Plug-ins』
から投稿して、ブログに表示させたかったので、いろいろ試してみた。

その結果、どれもWindows Live Writer Plug-insとはうまく連携してくれなかった。
なので、プラグインではなくて、直接syntaxhighlighterを入れることにした。

以下のサイトが大変参考になった。

memo+ ≫ WordPressでSyntaxHighlighter for Windows Live Writerを使用する

Windows Live Writer Plug-insのインストール

まだ、Windows Live Writer Plug-insを入れていない場合は、以下から手に入れる。

https://plugins.live.com/writer/detail/syntaxhighlighter-for-windows-live-writer

syntaxhighlighterのダウンロードとインストール

以下からダウンロード。

https://code.google.com/p/syntaxhighlighter/

rarファイルを解凍すると、以下の3つが格納されている。

  • uncompressed
  • Scripts
  • Styles

uncompressedを削除して、残り２つをWordPressのテーマフォルダ配下にアップロードする。

syntaxhighlighterの設定

WordPress画面を開いて、[外観] > [テーマの編集]を選択。

ヘッダの直前（ の前）に以下のコードを追加する。

archives/hp
wp_enqueue_style('SyntaxCss', get_bloginfo('template_url').'/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css');
 
wp_register_script('Core', get_bloginfo('template_url').'/dp.SyntaxHighlighter/Scripts/shCore.js');
wp_register_script('CSharp', get_bloginfo('template_url').'/dp.SyntaxHighlighter/Scripts/shBrushCSharp.js');
wp_register_script('BrushCss', get_bloginfo('template_url').'/dp.SyntaxHighlighter/Scripts/shBrushCss.js');
wp_register_script('BrushPhp', get_bloginfo('template_url').'/dp.SyntaxHighlighter/Scripts/shBrushPhp.js');
wp_register_script('BrushJava', get_bloginfo('template_url').'/dp.SyntaxHighlighter/Scripts/shBrushJava.js');
 
wp_enqueue_script('Core');
wp_enqueue_script('CSharp');
wp_enqueue_script('BrushCss');
wp_enqueue_script('BrushPhp');
wp_enqueue_script('BrushJava');

以下の2つは記述必須。あとは、言語によって選択する。

ここでは、C#,CSS,PHP,JAVAを設定している。

ちなみに、ここで言語を選択しないと、表示は薄い灰色に表示される。

wp_register_script('Core', get_bloginfo('template_url').'/dp.SyntaxHighlighter/Scripts/shCore.js');

wp_enqueue_script('Core');

続けて、JavaScriptを書く。

script type="text/javascript">
window.onload = function () {
    dp.SyntaxHighlighter.ClipboardSwf = 'wp-content/themes/wp/dp.SyntaxHighlighter/Scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
};

dp.SyntaxHighlighter.ClipboardSwfに設定するパスはそれぞれの環境に合わせて変更。

これで、Windows Live Writer から投稿すると、WordPressでコードか綺麗に表示されるはず。