• このエントリーをはてなブックマークに追加

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を入れていない場合は、以下から手に入れる。

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

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

以下からダウンロード。

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

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

  • uncompressed
  • Scripts
  • Styles

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

syntaxhighlighterの設定

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

ヘッダの直前( </head>の前)に以下のコードを追加する。

<?php
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でコードか綺麗に表示されるはず。