mikeo_410

ソースコード表示枠生成プログラム(DIVFrame)

１．概要

  Visual Studio の編集中のソースコードをホームページに貼り付けるときに使います。
  Visual Studio のエディタからクリップボードにコピーすると、カラー情報もコピーされることに気が付きました。ハイライティング（構文強調）されたまま、ホームページに貼り付けることができます。

http://www.vector.co.jp/soft/winnt/net/se465453.html

  必要な箇所をコピーして、このプログラムに貼り付けます。
  「HTMLをクリップボードへ」で、HTML化したテキストがクリップボードに入ります。

  FCKeditor などで、WYSIWYG なビジュアルのまま貼り付けられます。

２．入力となるデータ

  たいていのテキストエディタがハイライティングをしますが、この色情報はほとんど使えません。
  Visual　Studio との差は、RTF形式でクリップボードに格納するかどうかです。
  Visual　Studio は、Text と RTF の両方の形式でクリップボードに格納します。
  このプログラムは、クリップボードのRTF形式のデータを使って、HTMLを作ります。

  このプログラムの入力を受け付ける表示部分（貼り付ける部分）は、RichTextBoxなので、ファイルや図形も貼れますが無視します。必ずRTFのテキストを貼り付けてください。

３．出力となるデータ

  このプログラムは、Text と Html の両方の形式で、クリップボードへHTMLを出力します。内容は同じです。
  FCKeditor は、Html 形式のデータがあれば優先して受付け、編集しているHTMLにほぼ無変換で追加しているものと思います。
  同じ内容でも、Texit 形式の場合は、アンパーサンドを&am; に置き換えるなど、キー入力と同じように処理するものと考えられます。

４．DIVタグによる枠

  DIVFrame の画面の上の方に、「DIV属性」が書けるようになっています。
  主な目的は、

1. CSSファイルで見かけを設定するための class属性を設定します。
   サンプルの CSSファイル c_data2.css には、c_data2 が宣言されています。
2. 幅が狭い場合には、style="width:200px" のように幅を指定します。

５．CSSファイル

  preview.css  と c_data2.css の２つのCSSファイルが添付してあります。
  preview.css は、プレビュー表示で使用するもので、c_data2.css をインクルードしています。
  c_data2.css で、表示を形成している番号付きリストの外観を定義してあります。

６．表示幅について

  希望する標示は、以下のようです。

1. 内容が 500px程度より狭い（通常表示する窓の幅より狭い）場合は、幅は固定にする。
   窓の幅をそれ以上狭くしても、表示は変わらず、ブラウザの水平スクロールバーを使う。
2. 内容が 500px程度より広い場合は、窓の幅に合わせて伸縮する。
   窓の幅が内容より狭い時には、この枠にスクロールバーが表示される。
   ブラウザの水平スクロールバーは使わない。

  DIV属性に、幅を指定しないと ２ のような表示になります。
  style="width:200px"  のように、幅を指定すると １ のような動作になります。

７．表示のコピー

  IE8 と Chrome では、行番号なしでコピーできました。これは、エレメントのテキストデータに行番号が付いていないので、そのままクリップボードに送るだけで実現できます。
  行番号までコピーされるのは、わざわざ後で付けていると言うことのようです。

  FireFox では、クリップボードに送ることができませんでした。

８．行を塗り分けたかったが

  実は、奇偶で行を塗り分けて作ったのですが、水平スクロールバーが表示されるケースでは、最初に隠れていた部分にだけ、LI タグの背景色指定が効いていることに気が付きました。