【Windows Live Writer】WordPressにソースコードを綺麗に挿入したいとき、押さえておきたいWLWプラグイン2つ

当記事で紹介している「Crayon Syntax Highlighter Plug-in」は配布が終了したようです。

WordPressにソースコードをキレイに表示したいとき、どうしていますか？

大抵の場合は、以下の二つのWordpressプラグインを使っているのではないかと思います。僕はCrayonを使っています。

では、Windows Live Writer（以下WLW）上で、この二つのプラグインのどちらかを使用してソースコードを表示したいときは、どうしているでしょうか？

僕は最初、タグを手打ち（もしくはコピペ）する以外の方法が分りませんでした。その後テンプレート挿入のプラグインを使ってみましたが登録が面倒くさいということで、わざわざ自作のソフトまで作って貼り付けていました。ただこれでもやっぱり面倒くさい。

そこで、これを機にWLWのプラグイン作りに挑戦してみようと調べていたら、正にドンピシャで作りたかったプラグインをラッキーにも見つけることができました（こんな凄いの作れないけど）。先程紹介した2つの「Wordpressプラグイン」を使ってソースコードを挿入できる「WLWプラグイン」です。

こういうプラグインは、WLW公式のプラグインサイトに見当たらなかったので、ないものと思っていました。（ていうか、今覗いたら公式プラグインサイトなくなってるし…。）

photo by Titanas

Crayon Syntax Highlighter Plug-in

WordPressでCrayon Syntax Highlighterを使用している人は、Crayon Syntax Highlighter Plug-inがお勧めです。

作業ウィンドウにはこのように表示されます。

プラグインの入力フォームはこんな感じです。

Crayon Syntax Highlighterのほとんどの設定を、このフォームで行います。下にスクロールさせると、使いこなせないほどの数の設定情報が表示されます。

まずは、WordpressにCrayon Syntax Highlighterプラグインがインストールされている必要があります。

設定はそのままで特に変更する必要はないと思います。

次にCrayon Syntax Highlighter Plug-inをダウンロードしてインストールします。インストールが完了したらWLWを再起動します。

「DC.Crayon.Wlw.Setup.msi」をインストール。

今回はサンプルとして、適当なHTMLコードを挿入してみたいと思います。

まずは、作業ウィンドウなどからCrayonプラグインを選択します。

フォームが表示されるので、languageを選択し（今回はHTMLなのでXHTML）、Contentにソースコードを入力します。

すると、次のようにWLW上では表示されます。

スマートコンテントとして挿入されるので、WLW上で後から再設定ができます。スマートコンテントは、HTMLタグ内にWLW用の設定情報が埋め込まれるので、多少ソースコードは煩雑になりますが、Wordpressアップロード後も再設定可能になります。

作業ウィンドウに、以下のように設定情報が表示されます。「Override」ボタンを押せばダイアログが開き再び詳細な設定を行えます。

以上の方法で、挿入したHTMLソースが以下になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
</head>
<body>
Hello World!
</body>
</html>

WordPressでSyntaxHighlighter Evolvedを利用している場合は、PreCode Code Snipet Managerがお勧めです。

作業ウィンドウにはこのように表示されます。

プラグインの入力フォームはこんな感じです。

こちらはWordpressにSyntaxHighlighter Evolvedプラグインをインストールしてある必要があります。

SyntaxHighlighter Evolvedの設定で「全てのブラシを読み込む」にチェックを入れます。

PreCodeは、<pre>タグを使用するので必ずチェックが必要です。ですので[html][/html]というような表示コードを使用している場合は使えません。

次にCode Snippet With Syntaxhighlighter Supportから、PreCodeをダウンロードしてインストールします。インストールが完了したらWLWを再起動します。

「PreCode_x.x.x.msi」をインストール。

今回もサンプルとして、適当なHTMLコードを挿入してみたいと思います。

作業ウィンドウなどから、PreCodeを選択してください。

すると次のようなダイアログが表示されるので「Surround With」は「PRE」を。「Highlighter Class」は「XML/HTML」を選択してください。あとは入力フォームにソースコードを入力し「OK」ボタンを押してください。

PreCodeはスマートコンテントではないので、ただのHTMLタグだけ挿入されます。後から再設定はできません。

SyntaxHighlighter Evolvedのデフォルト表示では以下のように表示されます。

このブログはCrayon Syntax Highlighterを使用しているので画像で表示しています。

長いこと、Windows Live Writerを使用してきましたが、ソースコードを挿入するのに、こんなに良いプラグインがあるなんて知りませんでした。

これらのWindows Live Writerプラグインのおかげで、ソースコードの挿入がかなり楽になりました。Crayonは、あの滅茶苦茶多い設定項目を再現しているのも凄いですね。

それにしても、Windows Live Writerプラグインの公式サイト（http://plugins.live.com/writer/）が表示され無くなったのは何があったのでしょうか。とりあえず今はCodePlexなどからいくつかダウンロードできるようにはなっています。