Adding HTML Elements and Snippets
TypeMetal’s interface for inserting HTML elements is designed to help keep your fingers on the keyboard, and get you back to your train of thought as efficiently as possible. TypeMetal also provides a full complement of element- and snippet-applying menu commands, for those who prefer working with menus.
Shortcuts for Common Elements
TypeMetal provides instantaneous keyboard shortcuts for applying many of the common HTML elements you’re likely to want to use. Some of these shortcuts include extra smarts: They can move list items around, transform a paragraph (<p>) to a heading (<h1>-<h6>) or a heading to a paragraph, or instantly change the level (1-6) of a heading.
The most common use cases are likely to be familiar to you from TextEdit, and other apps that include similar behaviors. In TextEdit, pressing Command+B makes the selected text bold. If the selected text is already bold, pressing Command+B toggles it back, making it non-bold. If you press Command+B at the insertion point, you toggle whether the text you’re about to type will be bold. The same applies to Command+I for requesting italic text.
TypeMetal offers these same familiar behaviors, and extends them to other kinds of “inline” styling (styling applied to runs of text within a paragraph) as well. Its Structure menu provides keyboard shortcuts for the common inline styles that HTML offers:
| Keystrokes | Command |
|---|---|
| Command+I | <em>phasized (or <i>talic) text |
| Command+B | <strong>ly emphasized (or <b>old) text |
| Control+Command+= | <sup>erscript |
| Control+Command+- | <sub>script |
| Command+Shift+C | <code> (Program Source Code) |
| Command+Shift+K | <kbd> (Sample Keyboard Input) |
| Command+Shift+M | <mark>ed text (customarily shown as highlighted) |
| Command+Option+Shift+S | <samp>le output |
| Command+Shift+V | <var>iable |
(See also the comprehensive list of TypeMetal’s Keyboard Shortcuts.)
In modern HTML, use of <em> and <strong> semantic emphasis elements is encouraged, in preference to marking text as explicitly <i>talic or <b>old, so by default Command+I and Command+B toggle application of <em> and <strong>, respectively. You’re free to configure this behavior in TypeMetal’s General settings panel, however, binding Command+I and Command+B to HTML’s <i> and <b> elements if you prefer. For convenience, Structure → Emphasis Settings… command will take you there.
Initiating Completion
To insert an element at the insertion point, or wrap the selected content in an element, press Command+/, or simply type a < character (if “< triggers ‘Insert or Wrap In…’” isn’t disabled in TypeMetal’s General settings).
This summons the element completion UI:
You can change your mind and cancel out of this UI by pressing Esc. If typing a < character summoned it, and you just want to insert a < in your document, type < again. The completion UI will go away, and TypeMetal will insert a < in your document.
Insert or Wrap?
If you had an insertion point, TypeMetal inserts a temporary placeholder capsule like the one shown above, to show where the new element or snippet will go. If you had a selection, TypeMetal draws an extra highlight box around the selection, to help indicate that it’s going to be wrapped in the new element or snippet.
Finding the Desired Element or Snippet
The element completion UI offers a list of standard HTML elements that you might choose to insert. In this case, the document has an associated snippet set, so the list includes a couple of HTML snippets too (the “<div class=…” and “<span class=…” snippets).
You can step through the list using the ↑ and ↓ arrow keys if you like, but keyboard-driven smart completion is what TypeMetal was built for. All you need to do is type a few characters that will match the tag name of the element you want (or the title of the snippet you want), and you can usually zero in on the desired element or snippet with a few quick keystrokes.
If you wanted to insert a <strong> element, for example, you’d type “st”. As you type each character into the completion UI’s search field, TypeMetal narrows the search based on what you’ve typed, putting the best match at the top. Most of the time you can find what you’re looking for and get it to the top of the list within 2-3 characters.
Confirming Your Selection
Once you’ve zeroed in on the desired element or snippet, just press the Return key to confirm your selection. (You can also double-click any item in the list to choose it.)
TypeMetal removes the placeholder capsule from your document (if you’re completing at an insertion point), and inserts, or wraps the selection in, the selected element or snippet.