9月 062011

Windows Live Writer(WLW)経由でソースコードをきれいに表示する方法です。

WLWは便利名のですが、ソースコードを記入する場合はちょっと面倒です。

編集タブからソースタブに移動して、直接記述しなければなりません。

たくさんソースコードを書く場合はこれはこれでちょっと不便なのでプラグインを利用して、ソースタブに移動せずに編集タブで作業できるようにしたいと思います。

ソースタブで作業して編集タブに戻ってくると勝手に改行されてて悲惨な目に・・・

こういうのがいやなんですよね。

では、早速検証開始。

ソースコード表示用のWLWプラグインはいろいろありますが、とりあえず、

WLW Code Plugin « Rich Hewlett

を導入することにしました。

インストール方法は、↑このページのダウンロードリンクから最新版をダウンロードして、Zipを解凍して、WLWプラグインフォルダ(例として「C:Program FilesWindows LiveWriterPlugins」など)に入れるだけ。

挿入タブ>プラグインから実行できます。

image

EditModeにソースコードを記述します。

次にLanguageから言語を選びます。HTMLの場合はXMLを使用するといい感じです。

Previewで内容を確認します。

2011-09-06_112913

日本語を入れると、こんな風に文字化けしてしまいます。

これは、「SyntaxHighlight_WordPressCom_WLWPlugIn.txt」の文字コードをUTF-8にしてもなおりませんでした。

が、実際に表示される際には、日本語も文字化けせずに表示されるので特に問題はありません。

これが実際に表示させた状態です。

更に、今回はWordPressのプラグイン「SyntaxHighlighter Evolved」を使って、styleを編集してしまいます。

SyntaxHighlighter Evolved のインストールはWP管理画面からインストールするのが一番簡単です。

» SyntaxHighlighter Evolved Viper007Bond.com

こちらのページを見て頂ければ分かりますが、これを導入することでもソースコードの色分け表示は可能です。

しかし、WLWからブログを作成する場合

  1. [tag light="true"]your code here[/tag] などとタグを書くのが面倒…^^;
  2. タグを書いてもエディタ側で勝手に誤変換されてしまいおかしな表示になる

という状況が発生してしまうのです。

そのために、WLWプラグインである「WLW Code Plugin」を経由することで1番2番の問題を解決させています。

タグも書かなくていいし誤変換もされない、おまけに「SyntaxHighlighter Evolved」はいくつかテーマが選べるのでスタイルの変更も簡単です。

各言語(Brush name)の表示一覧です。(SyntaxHighlighter より引用)

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

関連記事

Trackback URL

管理者承認後に公開されます。リンクと感想は必須でお願いします

Posted by admin
QLOOKアクセス解析