WordPress.comにソースコードを貼る方法

wordpress.comにブログを開設して、Windows Live Writerでブログを書いていますがソースコードの貼付けがうまくできなくて悩んでいました。Webで検索すると自分でWordpressをホストしている人向けにプラグインの登録はCSSのアップロード方法が紹介されていますが、Wordpress.comではプラグインやファイルのアップロードが制限されているので使えません。ホント、Wordpress.comは制限が多いですよね、セキュリティ上しょうがないのかもしれませんが。

ソースコードを貼ると言っても単純にテキストを貼り付けるのではなく、IDE(自分の場合はVisual Studio)に表示されているように、予約語やコメントが色が付いている状態にしたいんですよ。こんな感じに(これは画像ですが)

image

そんなWordpress.comにソースを貼る方法を紹介したいと思います。

1.HTMLソースにsourcecodeタグを付加する。

こちらのWordpress.comに書いてある方法です。HTMLソースにsourcecode language=”csharp”をつけてソースを記述すると、このように表示されます。

        public override bool OnStart()
        {
            // For information on handling configuration changes
            // see the MSDN topic at http://go.microsoft.com/fwlink/?LinkId=166357.

            return base.OnStart();
        }

一見便利そうですが、Live Writerの「ソース」にタグ付きで文字列を貼り付けても改行が消えてしまい何がなんだかわからなくなってしまいます。こんな感じに。

public override bool OnStart() { // For information on handling configuration changes // see the MSDN topic at http://go.microsoft.com/fwlink/?LinkId=166357. return base.OnStart(); }

結局この方法を使おうとするとソースを貼らずにエントリーを投稿後、Wordpressのサイトへ行ってHTMLソースにこのタグを付けてソースコードを貼り付ける必要があります。あまりにも面倒くさくてありえません。

2.WLW Code Pluginを使用する

次はTwitterで教えてもらったLive Writerのプラグインを利用する方法です。こちらのサイトから最新版をダウンロードします。解凍するとDLLとテキストファイルがあるので、それをLiveWriteのPluginフォルダにコピーします。(自分の場合は「C:\Program Files (x86)\Windows Live\Writer\Plugins」)すると、以下のようにプラグインに「Source Code…」が表示されます。

image

この「Source Code…」をクリックするとソースを記述するダイアログが表示されます。ソースを貼りつけて、Languageに「csharp」を選択して「Insert」ボタンをクリックします。

image

        public override bool OnStart()
        {
            // For information on handling configuration changes
            // see the MSDN topic at http://go.microsoft.com/fwlink/?LinkId=166357.

            return base.OnStart();
        }

LanguageにHTMLが選べませんが、多分XMLで代用できると思います。ただ、Razor構文は対応出来ません...うーん...

3.いったんWordに貼り付ける

実は意外な形でソースコードをブログにきれいに貼り付けることができます。意外すぎてびっくりしました。

Visual Studioでソースをコピー

Wordに貼付け、行間・フォントを調整後、コピー

Live Writerで右クリック-[形式を指定して貼付け]-[書式の保持]を選択

すると、Visual Studioと同じスタイルでソースコードを貼り付けることができます。一見画像のように見えますが、テキストです。

        publicoverridebool OnStart()

        {

            // For information on handling configuration changes

            // see the MSDN topic at http://go.microsoft.com/fwlink/?LinkId=166357.

 

            returnbase.OnStart();

        }

Razor構文もこのように貼り付けることができます。

@model IEnumerable<AzureRoadTripSite.Models.Stage>

 

@{

    ViewBag.Title = “Index”;

}

 

<h2>Index</h2>

 

<p>

    @Html.ActionLink(“Create New”, “Create”)

</p>

 

今回は以上です。

“WordPress.comにソースコードを貼る方法” への 1 件のフィードバック

コメントを残す