Crayon Syntax Highlighter用のコードを手軽にブログに貼るためのツール「CodeToCrayon」を作ってみた【Windows Live Writer向け】

Windows Live Writer(Windows Essentials2012)は2017年1月10日でサポートが終了しました。それによりダウンロードもできなくなりました。最も近いブログエディターを利用するのであれば、Open Live Writerの利用をおすすめします。ただし2017年4月時点では日本語に対応していません。

クレヨン

一体誰が使うんだ?っていう、使う範囲の限られたWindows用アプリを作ってみました。

ブログエディターのWindows Live Writerのために、WordpressプラグインのCrayon Syntax Highlighter(以下Crayon)用のコードを生成&貼り付けるためのツールです。

その後、Crayon Syntax Highlighter Plug-inという素晴らしいプラグインを発見することができました。このソフトよりこちらを使った方がLive Writerの編集がはかどります。

photo by Matt Doucette

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

作った動機

WordPress上のエディターでCrayon用のコードを貼り付けるのは簡単です。インストールしたらデフォルトであるCrayonソース貼り付け用のボタンを使えば簡単に貼り付けられます。なので、ブラウザ上のWordpressエディターで編集している人には、このツールは必要ありません。

けれども、Windows Live Writer上でCrayon用のコードを貼り付けるには、結構大変です。

僕が知る限りでは、次の方法で貼り付けるしかないです。(他に良い方法があったら是非教えて欲しいです。)

  1. ソースエディター上でPREタグを手打ち(もしくはテキストをコピペ)した後にHTMLエスケープしたコードを貼り付ける
  2. ソースエディター上で、プラグインを用いて、あらかじめ登録しておいたPREタグを挿入した後にHTMLエスケープしたコードを貼り付ける

1は、PREタグをいちいち手打ちするのが面倒くさいです。

2だとプラグインに、言語形式によって異なったタグを何個も登録するのが面倒くさいです。

また、どちらにしても、ソースエディター上で編集しなければならず、字も小さく編集しづらいです。あとソースコードに、HTMLが含まれている場合は、エンコードマニアックスなどでHTMLエスケープをしてから貼り付けなければいけません。

今回作成した、「CodeToCrayon」によって、”上に書いた方法よりは”Windows Live Writerに手軽にCrayon用のコードを貼り付けることができるようになります。

最初、WEBアプリで作ろうとも思ったのですが、Windows Live Writer使いはWindowsユーザーですし、ネイティブアプリの方がザクザクと素早く編集できるのでWindowsアプリにしました。

「CodeToCrayon」の使い方

例えば以下のようなHTMLタグがあったとします。これをWindows Live Writerに貼り付ける方法を紹介します。

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

まずはソフトを起動したら、HTMLを貼り付けるのでコンボボックスから、「XHTML」を選択してください。(Crayonに「HTML」はないです。)

言語の選択

貼り付ける言語によって、対応言語を適宜選択してください。

テキストエディターなどから、コードテキストを上部の入力ボックスにドラッグ&ドロップします。

エディターからテキストをドラッグ&ドロップ

これで、Windows Live Writerに貼り付け用の、Crayonコードが生成&クリップボードにコピーされます。

Crayon用のコードが生成される

こんな感じのHTMLエスケープされたCrayon用のコードが生成されクリップボードにコピーされます。

<pre class="lang:default decode:true" >&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Untitled&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
Hello World!
&lt;/body&gt;
&lt;/html&gt;
</pre>

あとは、Windows Live Writerに形式を選択して貼り付けるか「Control+Shift+V」で貼り付けます。

形式を選択して貼り付け

コードの変換は、HTMLコードをコピー&ペーストして「変換&コピー」ボタンをクリックしてもOKです。

コピペとボタンクリックでもOK

「CodeToCrayon」のダウンロード

crayons

image by Kaz

「CodeToCrayon」のダウンロードは以下から行ってください。

CodeToCrayon ver1.0.0 ダウンロード

対応環境:Windowsなら多分どれでも

まとめ

Windows Live Writerを使う場合、これで従来よりはCrayonのコードが貼り付けやすくなると思います。

ただこんなツール、使う人が限られるので、今のところPREタグでの基本的な貼り付けにしか対応していません。もし、要望などありましたら、この記事のコメント欄に書き込んでください。あまりにも実装に時間のかかるようなものでなければ(1、2時間でできるようなものであれば)、対応します。

本来なら、HTMLエンティティを使用した貼り付けもできるように作りたかったんですが、検索がうまくヒットせずやり方がよく分りませんでした。

Delphiで作成しているんですが、最近GoogleでDelphiで検索しても、1ページ目から全然違った言語が検索結果に出ます。何年か前は、ここまでではなかったのに。もうかなりユーザーが少ないのか、Googleの仕様でそうなってしまったのか。どちらにしろ、マイナー言語なのでしょうがないです。

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

スポンサーリンク

『Crayon Syntax Highlighter用のコードを手軽にブログに貼るためのツール「CodeToCrayon」を作ってみた【Windows Live Writer向け】』へのコメント

  1. 名前:うらした 投稿日:2014/09/13(土) 16:47:53 ID:de8e407b9

    こちらのツール使ってみました。
    理想はWindows Live Writerのプラウグイン形式になることですかね。

    ところで今は、Crayon Syntax Highlighter Plug-In For Windows Live Writerというツールがあるので、それで十分ですかね。

  2. アバター画像 名前:わいひら 投稿日:2014/09/13(土) 16:57:03 ID:88ab8121c

    はい、僕もそう思ってプラグインの作り方をいろいろ調べているうちに、数日後にそのプラグインを発見しました;
    WordPressにソースコードを綺麗に挿入したいとき、押さえておきたいWLWプラグイン2つ

    僕も絶対Crayon Syntax Highlighter Plug-Inの方がいいと思います。
    そう思ったのでプラグイン作成もやめました。