Open Live WriterでWPプラグイン「Crayon Syntax Highlighter」に対応したソースコードを挿入する方法

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タグで挿入するための主な手順は以下になります。

  1. Dynamic Templateプラグインをインストール
  2. ソースコード挿入用のテンプレート追加

上記のように、以前はCrayon Syntax Highlighterプラグイン(WLW用)を用いて挿入していたソースコードの挿入を「Dynamic Templateプラグイン」で代用する方法です。

    Dynamic Templateプラグインをインストール

    まずは、Open Live Writerでテキストテンプレートを挿入するために、Dynamic Templateプラグインをインストールします。

    DynamicTemplate plugin for Open Live Writer. Contribute to Vladekk/DynamicTemplate development by creating an account on GitHub.

    上記から、「DynamicTemplate.v1.0.4_installer.exe」といった感じの名前のインストーラーをダウンロードしてWindowsにインストールしてください。

    以前Windows Live Writerを使用していた場合は、テンプレートの再登録をしなくても自動的に以前のテンプレートが反映されます。

    ソースコード挿入用のテンプレート追加

      あとは、Open Live Writer上でDynamic Templateプラグインを起動してください。

      Open Live WriterでDynamic Templateを起動

      すると以下のようなダイアログが表示されるので、「Edit Templates」をクリックしてください。

      Dynamic Templateプラグインでテンプレート編集

      次の画面で「New」ボタンを押してテンプレートを新規作成します。

      Dynamic Templateプラグインでテンプレートの新規作成

      テンプレート用の名前を入力します(名前は何でもOK)

      Dynamic Templateの新規作成で名前をつける

      次に、テンプレート編集ダイアログが表示されるので、以下の手順で入力します。

      Dynamic Templateのテンプレートコードの編集

      1. 「Variable Name」に対して「code」と入力(変数名の命名)
      2. 「Data Type」に対して「HTML (Multi-line)」を選択(複数行テキストの入力を指示)
      3. 「Template Body」に対してテンプレートコードの入力(実行コード)
      「Label」項目を入力することで、入力ボックスの案内メッセージを出すことも可能です。

      入力するテンプレートコードはこちら。

      <pre class="lang:default decode:true "><%= HtmlEncode(code) %></pre>

      上記のコードは、Crayon Syntax Highlighterで「言語指定無し(デフォルト)」でコードを挿入するテンプレートコードです。

      挿入するコードはHTML特殊文字をHtmlEncode()を用いて変換しています。

      動作

      登録後、Dynamic Templateに登録したテンプレートを実行すると以下のようなダイアログが表示されます。

      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>

      自前で言語を入力する場合

      自前で入力時に言語指定をしたい場合は、以下のように入力してください。

      Dynamic Templateで言語指定をしてコードを挿入する場合

      「Variable Name」に対して「code」、「Lang」の2つの変数を指定して、入力を促しています。

      入力するテンプレートコードはこんな感じ。

      <pre class="lang:<%= lang %> decode:true "><%= HtmlEncode(code) %></pre>

      「lang」に入力する文字列は、以下のページにある表を参考にしてみてください。

      PHP、HTMLなどのソースコードを紹介する際に見やすく編集してくれる Crayon Syntax Highlighterの設定の方法、利用方法の解説です。他のプラグインより処理が軽快で表示が重くなることを極力減らしてくれます。
      この入力方法の詳しい解説は省きます。

      まとめ

      こんな感じで、Open Live WriterでもDynamic Templateプラグインを用いてCrayon Syntax Highlighter用のソースコードを挿入することができました。

      とりあえず、プラグインのテンプレート機能で無理やりにでも挿入することはできます。

      というか、Dynamic Templateプラグインの汎用性の高さに、あらためて驚きます。

      サイト Open Live Writer

      サイト Crayon Syntax Highlighter — WordPress プラグイン

      サイト Releases · Vladekk/DynamicTemplate · GitHub

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

      スポンサーリンク