DEV Community

Cover image for Create a "Table of Contents" for your dev.to posts with one click
Johannes Kettmann
Johannes Kettmann

Posted on

Create a "Table of Contents" for your dev.to posts with one click

For my posts on dev.to I always want to have a Table of Contents. Until now I did that manually which was a lot of work. So I created a small JS snippet that you can use as bookmarklet.

A bookmarklet looks like a bookmark in your browser. But when you click it, a JS snippet runs on the current page.

Using a bookmarklet to generate a Table of Contents

Here's the source code. It goes through all h2 and h3 of the article, creates internal links, and concatenates them as markdown. Ready to copy & paste to your dev.to post.

(() => {
  let toc = "";
  let numH2 = 1;
  let numH3 = 1;
  document.querySelectorAll("article h2,article h3").forEach(element => {
    const a = element.firstElementChild;
    if (a?.nodeName === "A") {
      const text = (element.lastChild?.nodeValue || "").replaceAll("\n", "").trim();
      if (element.nodeName === "H2") {
        toc += `${numH2}. [${text}](${a.hash})\n`;
        numH2 += 1;
        numH3 = 1;
      } else if (element.nodeName === "H3") {
        toc += `    ${numH3}. [${text}](${a.hash})\n`;
        numH3 += 1;
      }
    }
  });
  console.log("## Table Of Contents\n\n" + toc);
})()
Enter fullscreen mode Exit fullscreen mode

How to create a bookmarklet? Create a new bookmark in your browser. In place of the URL you type javascript: followed by your code.

Here the minified JS snippet from above for your bookmark.

javascript:(()=>{let toc="";let numH2=1;let numH3=1;document.querySelectorAll("article h2,article h3").forEach(element=>{const a=element.firstElementChild;if(a?.nodeName==="A"){const text=(element.lastChild?.nodeValue||"").replaceAll("\n","").trim();if(element.nodeName==="H2"){toc+=`${numH2}. [${text}](${a.hash})\n`;numH2+=1;numH3=1}else if(element.nodeName==="H3"){toc+=`    ${numH3}. [${text}](${a.hash})\n`;numH3+=1}}});console.log("##%20Table%20Of%20Contents\n\n"+toc)})()
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
j3ffjessie profile image
J3ffJessie

That’s interesting. Are you using the table of contents on a blog or just for having it? Could see lots of benefits to this for longer articles or multi subject articles.

Collapse
 
jkettmann profile image
Johannes Kettmann

I use this in most of my post here (for example this one.

On my blog I have a custom ToC that's generated automatically and looks different on desktop and mobile. Here's the same article on my blog.

Collapse
 
j3ffjessie profile image
J3ffJessie

Nice. I’ll have to check this out for future articles I write if they are longer.

Collapse
 
derlin profile image
Lucy Linder • Edited

Nice one! I also created a tool for it: derlin.github.io/bitdowntoc/ (choose the dev.to preset ;)) but it requires more than one click. It does, however, let you choose where the TOC is located and some other cool stuff (limit headings levels, etc).

See: