ブログ、HTML上でのソースコードの貼り付け方を模索中・・・

昨日からプログラミングの学習の記録を再開したのですが、一つプログラミングの学習とは関係ないことで模索していることがあります。それは、ソースコードのこのブログの記事への貼り付け方です。

以前の記事でこのブログを書くのにWindows Live WriterからGoogle ドキュメントに変更したことを書きましたが、はじめにWindows Live Writerでブログを書き始めたこともあり、使い慣れているWindows Live Writerの方がGoogleドキュメントで記事を書くより私にとっては書きやすいと感じたので、結局現在はまたWindows Live Writerでこの記事を書いてたりします。昨日の"プログラミングの記録 プログラミング チャレンジ スクエア 1"の記事もWindows Live Writerで書いたのですが、今日その記事をみて少し検討しなければいけないことを発見しました。それがソースコードの貼り付け方です。

昨日の記事を書いた手順は、

1. まずソースコード以外の記事をWindows Live Writerの編集タブ(カテゴリ設定の上部)で書き終える。
2. その次にタブのソースを選択し、ソースコードを貼り付けたい場所にソースコードを貼り付け、それを<textarea></textarea>タグで囲む。
3. 最後にソースタブからプレビュータブに移動しブラウザでの表示を確認する。

という感じです。

プレビューで見た目も私が思っていた想像通りだったので、そのままWindows Live Writerの左上部の投稿ボタンから投稿し満足していたのですが(ちなみに投稿後にブラウザで表示するのチェックははずしています。プレビューで確認しているので2重に確認する手間を省くためです)、今日ブラウザで記事を見てみるとソースコードの部分がWindows Live Writerのプレビューの表示と違い、改行部分等が異なり見にくくなっていました・・・

ブラウザの問題なのかと思い、Mac上のSafari 4、VMware Fusion 3上のWindows XP Home EditionのInternet Explorer 8(VMware Fusion 3上のUbuntuにはFirefoxもインストールしてありますが、Mac、Windows上にはFirefoxはインストールしていないので、Firefoxでは確認してません。Ubuntuを起動するにはメモリ容量の関係もありWindowsをサスペンド、またはシャットダウンしてUbuntuを起動するという手間がかかるので・・・)で閲覧してもWindows Live Writerのプレビュー通りの思ったとおりの表示がされませんでした。記事の投稿時にWindows Live WriterがHTMLの中身を自動的に変換しているのか、あるいはBloggerの設定に問題があるのか、またはもともと思い通りに表示させるのが可能ではないのか、原因がわからないので、現在いろいろとHTMLについても少し勉強中です。(ソースコードを見栄えよく、綺麗にブログに貼り付ける方法がわかる方がいたらコメント欄で情報を教えて頂けると有難いです)

しかし、記録しないより記録していったほうが後から自分のプログラミング学習の成果が見て取れると思うので、とりあえずは見栄えが良くなくてもプログラミングの学習をわくわく楽しみながら記録していこうと思う今日この頃です。