画面右下あたりにあるプレビューボタンを押すと、生成されたタグのブラウザ上での表示を確認することができます。
このボタンが行っている動作を身も蓋もなく解説すると、「画面に表示されているタグを、previewフォルダ内にあるpreview1.txtとpreview2.txtのテキストではさんで、preview.htmlに書き込んでブラウザで開く」ということをやっています。
そういう仕様にしてあるので、preview1.txtとpreview2.txtを書き換えることでプレビュー画面をカスタマイズすることができます。
たとえばpreview1.txtは初期状態で
＜html＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8"＞
＜body＞
こんな風になっていますが、ここに
＜html＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8"＞
＜link rel="stylesheet" href="[サイトで使っているcssファイルのURL]" type="text/css"＞
＜body＞
こう書き加えることで、サイト上での表示に近い形でプレビューが行えます。これだけじゃなく、HTMLがわかる方なら、なんでも自由にカスタマイズできると思います。
ただし、文字コードはUTF-8のままにしておくことをお薦めします。文字コードを変更すると、プレビュー画面が文字化けする可能性があります。
preview2.txtも書き換えられるので、テーブルに入れて表示したい場合等、タグ挿入部より後の部分を書きたい時にも使えると思います。
