Open Live WriterはWindows Live Writer後継のブログエディターです。
サポートが終わったWindows Live Writerの代わりとして、オープンソースでアップデートされていて、新しいセキュリティー対策もされています。
ただ、Open Live Writerの難点として、「対応プラグインが少ない」ということがあります。
当サイトは、ソースコードを挿入する記事が多く、WordpressプラグインのCrayon Syntax Highlighterを用いてコード挿入を行っています。
で、以前のWindows Live Writerでは、Crayon Syntax Highlighter対応のプラグインが出ていました。
けれど、Open Live Writerでは対応プラグインはありません。というか、今後出そうな気配も今のところ感じません。
なので、Open Live Writerで「Crayon Syntax Highlighter対応ソースコード」を挿入しようと思ったら、直にタグを編集する必要があり、少し面倒でした。
ただ、Open Live Writerでも「Crayon Syntax Highlighter対応ソースコード」を手軽に挿入する方法を思いついたので紹介です。
目次
Open Live Writerでコードを挿入するための主な手順
Open Live Writerで「Crayon Syntax Highlighter対応のソースコード」をpreタグで挿入するための主な手順は以下になります。
- Dynamic Templateプラグインをインストール
- ソースコード挿入用のテンプレート追加
上記のように、以前はCrayon Syntax Highlighterプラグイン(WLW用)を用いて挿入していたソースコードの挿入を「Dynamic Templateプラグイン」で代用する方法です。
Dynamic Templateプラグインをインストール
まずは、Open Live Writerでテキストテンプレートを挿入するために、Dynamic Templateプラグインをインストールします。
上記から、「DynamicTemplate.v1.0.4_installer.exe」といった感じの名前のインストーラーをダウンロードしてWindowsにインストールしてください。
ソースコード挿入用のテンプレート追加
あとは、Open Live Writer上でDynamic Templateプラグインを起動してください。
すると以下のようなダイアログが表示されるので、「Edit Templates」をクリックしてください。
次の画面で「New」ボタンを押してテンプレートを新規作成します。
テンプレート用の名前を入力します(名前は何でもOK)
次に、テンプレート編集ダイアログが表示されるので、以下の手順で入力します。
- 「Variable Name」に対して「code」と入力(変数名の命名)
- 「Data Type」に対して「HTML (Multi-line)」を選択(複数行テキストの入力を指示)
- 「Template Body」に対してテンプレートコードの入力(実行コード)
入力するテンプレートコードはこちら。
<pre class="lang:default decode:true "><%= HtmlEncode(code) %></pre>
上記のコードは、Crayon Syntax Highlighterで「言語指定無し(デフォルト)」でコードを挿入するテンプレートコードです。
挿入するコードはHTML特殊文字をHtmlEncode()を用いて変換しています。
動作
登録後、Dynamic Templateに登録したテンプレートを実行すると以下のようなダイアログが表示されます。
上記のテキスト入力エリアにコードを入力して、「OK」ボタンを押すとソースコードが挿入されます。
言語指定で挿入する
Crayon Syntax Highlighterの言語を指定して、ソースコードを挿入したい場合は、以下のように「lang」部分を変更してテンプレートファイルを書いてください。
PHPの場合
<pre class="lang:php decode:true "><%= HtmlEncode(code) %></pre>
JavaScriptの場合
<pre class="lang:js decode:true "><%= HtmlEncode(code) %></pre>
CSSの場合
<pre class="lang:css decode:true "><%= HtmlEncode(code) %></pre>
HTMLの場合
<pre class="lang:xhtml decode:true "><%= HtmlEncode(code) %></pre>
自前で言語を入力する場合
自前で入力時に言語指定をしたい場合は、以下のように入力してください。
「Variable Name」に対して「code」、「Lang」の2つの変数を指定して、入力を促しています。
入力するテンプレートコードはこんな感じ。
<pre class="lang:<%= lang %> decode:true "><%= HtmlEncode(code) %></pre>
「lang」に入力する文字列は、以下のページにある表を参考にしてみてください。
まとめ
こんな感じで、Open Live WriterでもDynamic Templateプラグインを用いてCrayon Syntax Highlighter用のソースコードを挿入することができました。
とりあえず、プラグインのテンプレート機能で無理やりにでも挿入することはできます。
というか、Dynamic Templateプラグインの汎用性の高さに、あらためて驚きます。
サイト Open Live Writer