WindowsLiveWriterからの投稿記事にソースコードを挿入させる

この記事で紹介しているブログエディタは、現在下書きに使う程度でメインでは使用していませんが、SyntaxHighlighter Evolved, Crayon Syntax Highlighter を使用していて、WLWからソースコード(preタグ)を挿入したい方には参考になると思います

現在は、WordPressにも慣れてきたので管理画面の投稿から直接記事を書くことが多くなっています 。TinyMCE に拡張プラグインを導入すれば機能も増えますし、スラッグやフォーマット、抜粋文等も設定したいので直接記述するスタイルになりました。

pre タグで括ったソースコードの挿入も TinyMCE のプラグインを使って行っています。また、シンタックスハイライトには google code prettify を利用しています

詳細は下記リンクを参照して下さい

シンタックスハイライトに Google code prettify を導入


 

WindowsLiveWriterを使用して記事中にソースコードを表示させる事がやっと出来ました。
使用したのは、WLW側が PreCode_5.0.2 プラグイン、WordPress側が SyntaxHighlighter Evolved プラグインです

既に多くの方が実践されているはずなので検索しながらいろいろ試してみたのですが、なかなかうまい具合にいかずにWebをさまよっていたのですが、Windows Live WriterでWordPressにソースコード入力させるプラグインをレスポンシブ対応カスタマイズ の記事が大変参考になり、何とか実現することが出来ました。

WLWプラグイン PreCode

インストール

下記サイトの「download」ボタンをクリックしてダウンロードします
Code Snippet With Syntaxhighlighter Support for Windows Live Writer

clip_image001

ダウンロードした PreCode_5.0.2.msi をダブルクリックしてインストール

clip_image002

使用許諾が表示されるので内容を確認して同意します

clip_image003

インストール先の選択です。デフォルト設定のまま「Next」をクリックします

clip_image004

確認ダイアログが表示されるので「Install」をクリックします

インストールが終了するとデスクトップにアイコンが生成されます。
このプラグインは、WLW上から呼び出すのですが、アイコンからも呼び出すことが出来るようになっています。
clip_image005

WLWを起動させるとプラグインのオプションに PreCode Snippet が登録されているのが確認出来ます

clip_image006

ソースコード挿入

WLWを起動して、記事を作成します。

clip_image007

ソースコードを挿入したいところで、WLWの挿入メニュー部の PreCode Snippet をクリックすると、PreCode Snippet Manager が起動します

clip_image008

手順

  1. 挿入するソースコードをエディター等で開きクリップボードへコピー
  2. コピーしたソースコードを PreCode Snippet Manager に貼り付け
  3. パラメータの設定
  4. OKボタンでコード挿入
パラメータ

右側のパラメータ部の設定について少し説明します

Formatは、PREHTML Encode を選択します
次に、Highter Class でソースコードの言語の種類を指定します
コードと言語の指定が合っていないと言語に合わせた強調表示にはなりません

他の設定は、WordPress側のプラグインで設定するのでOFFで良いと思われます

コード挿入実行

画面上部の「OK」ボタンをクリックするとWLWにソースコードが挿入されます。挿入を中止するときは Cancel をクリックします

ソースコードを挿入すると、WLW上の表示は、こんな感じになりますが、WordPress側のプラグインを設定するとブラウザ上からは、綺麗に表示されることが確認出来ます

clip_image009

 

SyntaxHighlighter Evolved プラグイン

WordPress側で、 SyntaxHighlighter Evolved プラグインを導入します

プラグインの新規追加から検索してインストール、有効化を行います

設定

赤で囲っているのが重要な設定項目です

clip_image010

テーマ テーマが複数用意されているので、見やすいテーマを選択します。
「変更を保存」ボタンをクリックするとプレビューでどのような表示となるか確認出来ます
すべてのブラシを読み込む デフォルトでOFFとなっていますが、ONにしないとWLWから投稿したソースコードがWLW上で見たのと同じように表示されてしまいます
うまく表示されなかった場合は、ここのオプションがONになっているか確認して下さい

私の環境では、「コードボックスの表示を閉じておく」を指定すると何も表示されなくなってしまいました。
テーマによってはうまく機能していない設定があるかもしれません
自サイトで他の設定もいろいろ試して調整して下さい

ソースコードを挿入してみます

Django というテーマを選択して、先日、サイト内検索をGoogleカスタム検索に置き換える の記事では画像を貼り付けて紹介したコードを貼り付けてみます

2014/4/9 現在は google code prettify を利用てシンタックスハイライトを行っています

<?php

// Exit if accessed directly
if ( !defined('ABSPATH')) exit;

/*

Theme Name: Responsive Child Theme 
Template: responsive

Template Name: Google検索結果

*
* @file           search-result.php
* @package        Responsive 
* @version        Release: 0.1

      
*/

?>
<?php get_header(); ?>

    <div id="search-results" class="grid col-940">
        <!-- Google custom search 検索結果表示 -->
        <!-- Place this tag where you want the search results to render -->
        <gcse:searchresults-only>
        </gcse:searchresults-only> 
    </div><!-- end of #cse-search-results -->


<?php get_footer(); ?>

綺麗に表示されているでしょうか (^^)

これでソースコードを画像のイメージでなくコードとして表示させることも出来るようになりました。

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss