Snippets

Comments are locked.

posted by Martin Cohen in Features June 27th, 2006

Snippets are small pieces of code, which you can insert in a document. The snippet is inserted by pressing shortcut or using a tab trigger (described later). In the dark editor times, one could only to specify the code and a place when you want caret to be after insertion:

<div>
    $0
</div>

After activating this snippet, the DIV tag is inserted and caret is placed between tags (at position of $0). Snippets in Intype are much smarter than this. You can specify more places for caret and switch by pressing Tab or Shift+Tab (therefore we will call them tabstops). An example:

<div$1>
    $0
</div>

After activating this snippet, the caret is at $1 tabstop. You can type some attributes for DIV tag and press Tab to jump at $0 tabstop. The $0 is somehow special. Caret is placed here after completing all tabstops in the snippet.

Intype also allows you to mirror value of tabstops.

<$1>
    $0
</$1>

This will insert empty <>…</> marks and places caret between first <>. As you type, the end tag </...> is filled with the same text as start tag. The thing that happened here is that the first $1 is for Intype “source”. When Intype finds next $1 it remembers it as “mirror”. As you edit the source, value is automatically copied to mirror.

Now, what if you need some default value (say “div”) for tag name to be pre-filled when you insert this snippet?

<${1:div}>
    $0
</$1>

This inserts “div” as default tag name and puts a selection around it.

Now, let me show you something more complicated. The IMG tag needs some automation for inserting propper width or height. You want Intype to fill value from image file specified in src attribute.

<img src="$1”
    height=”${1/`image.width(INPUT)`/}”
    width=”${1/`image.height(INPUT)`/}”
    />

This will insert a code like <img src="|" width="0" height="0" />. The caret is placed at $1 position. When you are editing the src attribute, the width and height attributes are calculated automatically from image file specified in src.

Notice the code image.width(INPUT). This is LUA language. And LUA does the magic! LUA opens image file, gets the width and height and fills values.