Advertisment

Build your ‘wysiwyg’ HTML Editor

author-image
PCQ Bureau
New Update

If vi (or one of its friends, such as elvis or vim ) is your favorite text editor, as it is mine, you must surely long for a way of creating HTML with it quickly and comfortably. And if with that you could get the convenience of ‘wysiwyg’, wouldn’t you just jump at it? All this is indeed possible, and here we’ll see how.

Advertisment

The major hurdles I’ve found in editing HTML with vi are (1)The need to write HTML tags. It appears that there are more tags to be written than displayable matter. Moreover, some of these tags have a syntax that is hard to remember. (2) The need to keep track of whether an opening tag has been given its proper closing tag at the right place (for example, whether a

    has a matching

). (3) Difficulty in readily identifying matching pairs of tags.

These can be got around using some of the less used features of vi and friends. In this article I shall use vim for definiteness, but the ideas should apply to classic vi and its other look-alikes as well.

Advertisment

The ‘abbreviation’ feature of vim

Vim has a feature whereby it is possible to assign a keystroke sequence to represent a string of characters in input mode. This is the ab colon command. For example, the command

:ab tT
Advertisment

creates an abbreviation, named tT, for the sequence of characters . Then, in input mode, as soon as the characters tT are typed, they are replaced by the string . Complicated HTML tags may also be abbreviated. The ab definition

:ab aH ^M Comments here^M^D

makes aH the shorthand for

Advertisment




Comments here



where the two ^M s cause the two line breaks and the ^D causes the closing tag to be indented back to be in line with the opening tag. (Indenting the matter enclosed within a matching pair of tags makes reading and editing the raw HTML easier.) The syntax of the tag is outlined, as an aid to memory. The ‘Comments here’ line is a placeholder, to be replaced with appropriate text.

What are the { and } within HTML comments doing there? Aha! Those are for matching the opening and closing tags (in this case and ). The bracket matching feature of vi (using the % key) is readily usable for the purpose. This can be really helpful when the opening and closing tags are many lines apart and cannot be readily matched “by eye”, such as can be the case with the

    Advertisment

    pair.

    This technique can be extended to generate fancier HTML, for example with frames. All one has to do is to define the appropriate abbreviations. For example, the definition

    :ab fS frameborder=”0” framespacing=”0”



    cols=”20%,80%”>^M
    Advertisment

    makes the string fS a convenient abbreviation for the pair of tags:





    Some tags do not like comments to come in between the opening and closing pair. The ones I have found are and . Luckily, in both these the opening and closing pair are never very far apart, so the braces-within-comments feature is not needed.

    Advertisment

    My .vimhtmlrc file





    How do I tell vim about these abbreviations? I put all of them (and a command to set some of vim’s variables) in a file, which I call .vimhtmlrc and which resides in my home directory, and invoke

    vim -u ~/.vimhtmlrc index.html

    where index.html is the HTML file I want to edit. This is what my .vimhtmlrc file looks like:





    ab tL ^M Title here^M^D


    ab tS

    ab aH ^M Comments here^M^D



    ab aM ^M Comments here^M^D


    ab bO ^M


    ab bR




    ab cE
    ^M



    ab cM


    ab cO ^M


    ab dL
    ^M




    ab dT




    ab fO ^M


    ab h1

    ^M Heading size 1^M^D








    ab h2

    ^M Heading size 2^M^D






    ab h3

    ^M Heading size 3^M^D






    ab hD ^M


    ab hR






    ab hT ^M


    ab iM


    ab lI
  1. ^M








  2. ab oL

      ^M





    ab pR

    ^M





    ab tD

    ^M
    ^M






    ab tT


    ab uL

      ^M





    ab xB


    ab xI


    ab xP

    ^M







    se ai aw sw=4 ts=4 wm=10 showmode showmatch ruler magic







    When the ab commands are put in a file, to be read in by vim at startup, then the leading :is not needed. The last line is a command to set some of vim ‘s variables. Here is what they mean:

    se set: tells vim to activate the options that follow
    ai autoindent: begin the next line in the same column as this one (and not from

    column 1)
    aw autowrite: automatically write file to disk when it changes
    ts=4 on a TAB key, move cursor 4 characters (and not the normal 8); this is my personal preference
    sw=4 number of spaces to use for indentation
    wm=10 chars from right margin where line wrapping starts (useful if one is writing running text and not programs)
    showmode message on status line to show current mode (for the novice, actually)
    showmatch briefly jump to matching opening “(“ or “{“ or “<“ as soon as a closing “)” or “}”

    or “>” is typed; beep if no match
    ruler show cursor line and column in status line
    magic some characters, such as “.” and “*”, have special meanings in search and replace patterns.

    Typing help in a vim window shows the explanations for these options and many more besides.

    ‘Wysiwyg’

    ‘Wysiwyg’ has two parts to it. To begin with is the fact that Netscape under Unix (and Linux) can be controlled remotely.

    That is, you may control the behavior of an already running Netscape through commands of the form

    netscape -remote -noraise ‘openFile(/home/mlaha/html/index.html)’

    (If no Netscape is running, the command just exits with an error message.) This command causes the Netscape browser window to attempt to open the file /home/mlaha/html/index.html. For more on remote controlling Netscape, see

    http://home.netscape. com/newsref/std/x-remote.html.

    And then, there is atchange . Jeffrey Copeland and Jeffrey Haemer (http://alumni.caltech.edu/~ copeland/work/edit-web.html) describe a little shell script, called atchange, that waits in the background for a named file to change and then invokes a specified command. Thus,

    atchange index.html “netscape -noraise -remote ‘openFile(/home/mlaha/html/index.html)’” &

    would cause atchange to run in the background, watching the file index.html and, as soon as it changed, ask Netscape to display it afresh. If you were editing index.html with vi, then, when you saved it (with :w, say), atchange would spring into action and Netscape would update its display.

    If you wish to edit another HTML file, you have to quit vim, kill the current invocation of atchange, then start it again with the name of the new file in place of index.html and begin editing that file with vim.

    Other ‘wysiwyg’ uses

    As you may have guessed, atchange can be used in other instances, too. You can make a handy ‘wysiwyg’ LaTeX editor by having atchange monitor your LaTeX source and, when it changed, run the necessary programs to convert it to Postscript. The ‘wysiwyg’ capability is provided in this case by invoking Ghostview with the monitoring option (-watch) that causes it to redisplay its current Postscript file whenever that file changes. Thus, every time you saved your LaTeX source file in the editor, the Postscript output with the latest changes would be automatically displayed in the Ghostscript window.

    Manas K Laha,

    Aerospace Engineering Department, IIT Kharagpur

    Advertisment