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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

Wordpress

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

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

  1. Crayon Syntax Highlighter
  2. SyntaxHighlighter Evolved

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

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

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

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

photo by Titanas

スポンサーリンク
レクタングル(大)広告

Crayon Syntax Highlighter Plug-in

Crayon Syntax Highlighter Plug-in for Windows Live Writer - DotCastle Blog

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

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

Crayon Syntax Highlighterプラグイン

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

Crayon Syntax Highlighterプラグイン作業ウィンドウ

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

使い方

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

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

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

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

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

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

Crayon Syntax Highlighterプラグイン

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

Crayon Syntax Highlighterプラグイン入力例

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

Windows Live Writer上での表示例

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

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

Crayon Syntax Highlighterプラグイン作業ウィンドウ設定画面

表示例

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

PreCode Code Snipet Manager

Code Snippet With Syntaxhighlighter Support for Windows Live Writer - Home

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

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

PreCode Code Snipet Manager作業ウィンドウの表示

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

PreCode Code Snipet Manager入力フォーム

使い方

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

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

SyntaxHighlighter Evolvedの設定

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

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

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

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

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

PreCode Code Snipet Manager作業ウィンドウの表示

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

PreCode入力例

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

PreCodeタグの挿入

表示例

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

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

まとめ

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

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

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