syntaxhighlighterをWordPressに入れてWindows Live Writerから投稿

    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を削除して、残り2つを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');
    }
    </script>
    

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

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