Editing a Snippet
TypeMetal provides two ways of viewing a snippet:
- a compact, one-line summary that tells you everything there is to know about a “simple” snippet, using a concise shorthand
- an expanded view that provides for viewing and editing arbitrary HTML snippet content
You can toggle any snippet between compact and expanded views by clicking the disclosure button on the snippet’s right side. Double-clicking a snippet capsule also toggles the snippet between compact and expanded views.
Snippet Shorthand
Many snippets are “simple”, consisting only of a single HTML element with optional “class” and “id” attributes.
TypeMetal uses a very simple shorthand, based on CSS selector syntax, to show you the content of “simple” snippets at a glance. You can edit simple snippets easily and efficiently, by editing this shorthand representation.
The shorthand simply shows:
- an optional element name
- optional “id” names, each prefixed by a
# - optional “class” names, each prefixed by a
.
Some examples of snippet shorthand:
div.box.box#pagesection#id1#id2.class1.class2
When a snippet doesn’t specify an element name, TypeMetal assumes “span”. A snippet must specify at least one class name, one id name, or an element name.
When editing a snippet as shorthand, you may specify “.classNames” and “#idNames” in any order. When you finish editing, TypeMetal rearranges the shorthand to place “#id” names first.
TypeMetal uses this same shorthand in path bar segments, to compactly show the “id” and “class” names assigned to an HTML element.
Editing a Simple Snippet
To edit a simple snippet, just click the snippet’s shorthand description, and edit or replace it to produce the snippet you want. TypeMetal checks the shorthand as you type, allowing for an optional element name, followed by optional .-prefixed class names or #-prefixed id names, with no spaces.
For example, you could type “.person” to make the snippet stand for a <span> element (the default element type that TypeMetal assumes) whose “class” attribute is “person”.
As another example, you could type “div.box.group” to make the snippet stand for a <div> element whose “class” attribute specifies the two class names “box” and “group”.
Expanded View
To view a snippet’s HTML content using the expanded UI, click the disclosure triangle at the right end of the snippet capsule, or double-click the snippet capsule.
The snippet capsule expands to show you the HTML that defines the snippet, in an editable text area. Just below the text area, a status field tells you whether TypeMetal sees any problems with the snippet.
A simple snippet’s content consists of an HTML start tag, a {content} placeholder token, and an HTML end tag. For example:
<cite class="journal-article">{content}</cite>The {content} token indicates:
- where the wrapped content will go, when you apply the snippet to a selection
- where TypeMetal should put the insertion point, if you insert the snippet instead of applying it to a selection
Editing in the Expanded View
You can edit any snippet’s content in expanded mode, by typing in the expanded snippet’s text area. This approach gives you full control over a snippet’s content, and the ability to transform a simple snippet into a more complex snippet when desired.
There’s no need to worry about the exact formatting of a snippet’s HTML markup (the placement of spaces and newlines), since TypeMetal always writes HTML files following your HTML formatting settings. Instead, focus on the significant content of the snippet — the elements and attributes it contains, usually along with a {content} placeholder token.
You’re free to type or paste anything you like into the snippet editing area, which validates as you edit, and indicates any problems with your snippet in the snippet’s validation status light, and in the status field below.
As you type and edit, TypeMetal checks your snippet’s content against the snippet set’s declared document type and set of allowed elements. TypeMetal indicates the validation status of each snippet in the set using an indicator light next to the snippet’s title. If you want to see how your snippets validate against another document type, you can temporarily change your snippet set’s document type. TypeMetal will reassess each snippet’s validity for the new document type.
Most often, as in the example from above:
<cite class="journal-article">{content}</cite>a snippet consists of a single HTML element, accompanied by any attributes you wish to give the element. Here, the element is a <cite> element, with a “class” attribute whose value is “journal-article” (a user-defined name that can be used to style such elements using CSS).
You can drag the {content} placeholder token elsewhere in your snippet. If your snippet doesn’t contain a {content} token, the expanded snippet view provides one that you can drag into it. (Find it just below the editing area.) It is an error to have more than one {content} placeholder in a snippet (which would be ambiguous).
When you create a snippet from some selected document content, you’ll probably want to replace some of the text the snippet contains with the {content} token, to make the snippet generally applicable to any content you want to apply it too. (A snippet is free to contain boilerplate text if desired. If you omit the {content} token, however, you will only be able to insert the snippet; TypeMetal won’t know how to wrap the snippet around selected content.)
Once you’ve defined a snippet, you’ll want to try applying it in an HTML file to make sure it works as intended.