HTML Indexing Gets Better

Note: This post is over a year old. You may want to check later in this blog to see if there is new information.

I started discovering more and more mistakes in the original HTML indexing bundle. I ended up rewriting a lot of it and adding a lot of new functionality. It now recognizes a plethora of different formats for anchor tags, including empty anchors before headers, inside of headers, anchors with link text, etc. And there’s a new auto-indexing command that creates a hierarchical index. There’s even one that scans for headers and adds the anchor tags FOR you. It can’t get much easier than that. Let me know if it works. The docs from the bundle follow, download link at the end…

This is a general help file for the HTML Index bundle by Brett Terpstra, designed for quickly creating single page indexes using (X)HTML named anchors in TextMate.

Create Named Anchor

The first step is to create the anchors in the document, or the places where the index links will jump to on the page. These can be headlines, first lines of text, or simply locations with no text. To create an anchor, press ⌃-⇧-R and select “Create Named Anchor” from the menu. If you have text selected, it will offer you a suggested name. This command inserts only a snippet for you to edit.

Note: It is required that you enter a name for the anchor, or there will be nothing to index (or link to)!

Note: If you plan to use the “Create Hierarchical Index” command, you should not create any anchors. See the command below.

Create Named Anchor Link

You can manually link text to your anchors by selecting the text (or image) to link, pressing ⌃-⇧-R, and selecting “Create Named Anchor Link”. It will give you a list of all of the anchors in the current page and selecting one will create the link to the anchor. It will be inserted as a snippet for you to edit as necessary.

Automatic Indexing

From the ⌃-⇧-R menu, selecting “Create Index of Anchors” will create an ordered list (ol) of all of the anchors in the order they appear in the document. The <ol> tag is a stop in the snippet, so it can easily be changed to an unordered list or have a class added or removed from it.

Sub-indexing

Running the indexing commands while a portion of the document is selected will index only that part of the document and copy the results to the clipboard (you will be notified by a tooltip). There is a command (“Insert Clipboard as Snippet”) in the ⌃-⇧-R menu that allows you to paste the results as a snippet at an appropriate location in the document.

Hierarchical Indexing

If your document follows a hierarchy using header tags (h1-h6) you can automatically create an index for the entire document or any portion of it with the hierarchical indexing commands. “Create Hierarchical Index from Anchors” will scan your document for any anchors in or near a header tag, determining the list nesting based on the level of the tag. If you haven’t placed any anchors yet, then use “Create Hierarchical Index” and it will automatically place the anchors in your document for you. If you select a portion of the document, the index will be inserted at the top of the selection, otherwise it will be inserted just below the body tag.

Download: htmlindex2_tm.zip

» » » » »

Have your say

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>




Safari hates me