HOME xyzzy download 書き込む

右クリックを使った HTML 入力

1. はじめに

html+-mode の機能を拡張するスクリプトを書いてみました。

出来ること：

2. インストール

次の手順でインストールを行います。
  1. html+-mode をインストールします。
  2. add2html.lzh を解凍します。add2html+.l, add2html+.lc, /module が生成するので、 それらをそのまま /site-lisp にコピーします。
  3. .xyzzy に次の行を加えます。 
    (add-hook 'ed::*html+-mode-hook* #'(lambda () (require "add2html+")))
  4. ダンプファイルを更新します。

3. 使い方

HTML ファイルを編集すると マウスの右ボタンのポップアップメニューの下に、 下に示すような表示が追加されます。

  1. <x> ............ </x>
  2. <x...... > ........ </x>
  3. <x>
  4. <x...... >
ここで、
<x> ............ </x>: <i>, <b>, <sup>, <sub>, etc
<x...... > ........ </x>: <a>, <span>, etc
<x>: <br>, <p>, etc
<x...... >: <img>, etc

3.1. < x > ............ < /x > の使い方

表示様式を変えたい部分を選択してマウスを右クリックし、矢印を < x > ............ < /x > に あわせます。すると、この形式を持つタグの一覧が表示されますので、その中から目的のタグを選んで左クリックします。
たとえば、
これを太字にしたい を
右クリック → < x > ............ < /x > → < b > の選択をすると
< b > これを太字にしたい < /b >
というようにタグで囲まれます。

3.2. < x ..... > ...... < /x > の使い方

属性と本文を '|' で区切り、3.1. と同様の操作をします。なお、 < a > の場合は、属性部 に ピリオド '.' があると href=" が挿入され、ピリオドが無いと name=" が挿入されます。
以下に例をあげます。

3.3. lists and table の使い方

前後を <TAG> ---- </TAG> (TAG = table, ol, ul) ではさみ、項目は '|' 出区切ります。レコードの先頭には '|' をつけます。 その後、<TAG> ---- </TAG> の間にカーソルを持っていき、M-l を押します。

例 

<table>
|花の名前|季節|色
|タンポポ|春|黄色
|朝顔|夏|青
|菊|秋|黄色
</table>
--------> 
<table>
   <tr>
      <th>花の名前</th>
      <th>季節</th>
      <th>色</th>
   </tr>
   <tr>
      <td>タンポポ</td>
      <td>春</td>
      <td>黄色</td>
   </tr>
   <tr>
      <td>朝顔</td>
      <td>夏</td>
      <td>青</td>
   </tr>
   <tr>
      <td>菊</td>
      <td>秋</td>
      <td>黄色</td>
   </tr>
</table>

<ol>
|松
|竹
|梅
</ol>
--------> 
<ol>
   <li> 松
   <li> 竹
   <li> 梅
</ol>

<ul>
|すずめ
|つばめ
|つる
</ul>
--------> 
<ul>
   <li> すずめ
   <li> つばめ
   <li> つる
</ul>

<dl>
|鳥|鳴く
|魚|泳ぐ
|馬|走る
</dl>
--------> 
<dl>
  <dt><b>鳥</b></dt>
      <dd>鳴く</dd>
  <dt><b>魚</b></dt>
      <dd>泳ぐ</dd>
  <dt><b>馬</b></dt>
      <dd>走る</dd>
</dl>

3.4. < x > の使い方

カーソルの位置に単独で用いられるタグを挿入します。範囲の選択は行いません。

3.5. < x...... > の使い方

変換したい範囲を指定して挿入したいタグを選びます。 例えば、 src="aspell_window.jpg" title="window of aspell" に "img" を用いると
< img src="aspell_window.jpg" title="window of aspell" > となります。

3.6. preview

F10 で、html が別窓で表示されます。また、
S-F10 で、html 窓用のコマンドをミニバッファから入力します。

3.7. キーバインディング

以下に default の key binding を示します。
M-l
リスト、テーブルを作ります。
M-b
<br> を挿入します。
M-p
<p> を挿入します。
M-h
<hr> を挿入します。
M-.
<a href= ... を挿入します。
M-/
ミニバッファからタグを入力して選択された範囲の前後に挿入します。
M-@
開いたままのタグを閉じます。
F10
Html を別窓で表示します。
S-F10
別窓で表示した Html を操作します。

4. 終わりに

このページはほとんど紫藤用の備忘録です。
ご参考までに。

HOME xyzzy download 書き込む