Don’t Bother with Table of Contents Anymore: an appendix.

This may come in handy:

Speaking of Table of Contents mechanism the key thing is that it should be automatically applied only when it is indeed needed. It may be reasonable to assume that not every post or article on Your site requires its own ToC - therefore, if Your ToC mechanism would simply turn each and every first numbered list into a clickable Table of Contents, it could make some trouble. This is the reason You need a conditioning, which could secure the thing to be applied only when it indeed has to do with a genuine ToC.

In the basic approach we’ve used a simple “key phrase” present within an article to determine if the ToC mechanism should be applied (affecting the article’s first numbered list). The code looked as follows:

if ($(".post-body:contains('Quick survey on what’s coming')").length > 0) {

where “Quick survey on what’s coming” was our “key phrase”. But what if a numbered list to convert into a ToC is not necessarily the first list within the article? Not so long ago I Myself have stumbled upon such a case.

In such circumstances You need an extra “ID” to recognize the list which is meant to be Your Table of Contents. If You think HTML, the thing comes down to adding id="IDName" to Your <ol> opening tag. But the whole purpose which inspired Me to create an automatic ToC was “no coding while writing” - meaning I don’t want anything to distract Me while I’m writing articles. Writing additional code, whatever simple, is a completely different thing, far away from what I’m really focusing on. Since I’ve learned about Markdown, I’m enchanted by the ability of focusing on writing, while a pure and clean HTML code will be created for Me directly out of My - plain! - text. Insanely great :) .

But then I asked Myself: What about Table of Contents? - How I could handle this if I would prefer no coding at all? To create a numbered list in Markdown You need to do the most obvious and intuitive thing: to write a numbered list as everybody knows it:

1. Item one.
2. Item two.
3. Item three.
4. Etc.

There is no need to put any HTML tags, therefore no place to insert our id for <ol>. So we are back to the question How to recognize a ToC-related list among all the rest?

I decided to harness our already existing key phrase. Although it seems impossible to force Markdown itself to put the phrase within a list, turning it into its “header” - it may be enough just to have it rendered as an ordinary paragraph:

<p>Quick survey on what’s coming</p>

<ol>
	<li>item one</li>
	<li>item two</li>
</ol>

From this point forward You can help themselves with jQuery, which could move the phrase into the list. And then it will be easy to recognize this list as the ToC-related one (as it contains Your key phrase) - that simple :) . As a result the only thing for a writer (or a blogger) to remember is to always put the key phrase just before the list which is meant to be a Table of Contents. Whenever You do that, in a web-browser this list will be automatically converted into a clickable ToC to make Your Readers’ life easier :) .

Although it sounds simple, code-wise it requires a couple of steps to take:

1. Find a numbered list which is closest to the key phrase - and create an additional “container” within the list.
2. Put the key phrase into the container.
3. Remove the original instance of the key phrase in order not to have it displayed twice.
4. Perform all the rest ToC steps described in the previous article.

Here is how it looks code-wise. All the code below should be placed within the head condition, i.e.:

if ($(".post-body:contains('Quick survey on')").length > 0)
{
	..........
}

On the very beginning put this:

1. Find a numbered list which is closest to the key phrase - and create an additional “container” (<span>) within the list.

   $(".post-body p:contains('Quick survey on')").next("ol").prepend("<span>...</span>")

2. Put the key phrase into the container.

   $(".post-body ol span").html($(".post-body p:contains('Quick survey on')").html());

3. Remove the original instance of the key phrase in order not to have it displayed twice.

   $(".post-body p:contains('Quick survey on')").remove();

4. Perform all the rest ToC steps described in the previous article and enjoy Your dynamically created Table of Contents being even more precise :) .