VSCode extension to auto-add id attribute to section headers and create table of contents in HTML; Using it for Blogger blog posts/pages

Note: This post is in-progress. However, as the extension is available, I thought of publishing the in-progress post having the extension repo link and some other details.

Quick-Info

The VSCode Extension repo: https://github.com/ravisiyer/html-auto-header-ids . Its Readme explains how to use it.

Details


Blogger does not have a way to support automatically adding an id attribute to section headers in a post. An id attribute enables the section header to be used as the target of a 'jump link,' which can be used to create internal links within a Contents section of the post, or even as a link from an external webpage.
...
****To be updated****

Background Info including AI chat extracts

Creating internal links in Blogger blog posts involves switching from Compose to HTML view, searching for the required section's HTML and adding an id to its HTML element. This is the part that is quite time consuming. Creating a link to such an internal link is easy as Blogger's UI in Compose view provides that functionality (no need to get into HTML view and write HTML code). Is there some simpler way of creating internal links in Blogger blog posts?

I spent some time over past few days (from around 2 Sep. to 4 Sep. 2025) with ChatGPT and Google Search AI to get a solution. 

In chat titled, "Blogger: Creating internal links easily", CG gave some suggestion(s) that did not work. ... Google Search AI clearly said:
As you have discovered, inserting a named anchor to create a jump link requires adding an id attribute, and Blogger's visual editor does not provide a simple button for this. The only reliable way to add an ID is to switch to the HTML view and insert it manually.
-----

I asked:
Is there some free plug-in for Blogger that provides this functionality to add an ID (named anchor) to a section heading without having to edit the HTML
-----

Google Search AI said:
As a self-contained platform, Blogger does not support external "plugins" in the same way that WordPress does. Any third-party tools that automate functions like adding id attributes would involve editing the core HTML template of your blog, which is a more advanced process than simple HTML editing within a post. There is no official or widely available free tool that can add named anchors in Blogger's visual editor.
-----

In same chat as mentioned earlier, ChatGPT gave some JS suggestions:
How To Add Automatic Table of Contents To Blogger With Tocbot, https://therealweblog.blogspot.com/2019/05/how-to-add-automatic-table-of-contents.html - Involves Theme editing and using JS library Tocbot, https://tscanlin.github.io/tocbot/# . 

Create Automatic Table Of Contents In JavaScript - TOC Plugin, https://www.mybloggertricks.com/2017/02/automatic-table-of-contents.html - Relevant section: How To Install TOC Plugin in Blogger Blogs? - Involves HTML code insertion.
-----------

I am not comfortable with all this JS code insertion. I mean, if there is some bug in it, the blog post could go for a toss. So I will have to dig into the JS code and be sure that it will work. That will be too much time.

I guess manual editing is safer than all this JS code insertion stuff.

To ease manual editing, I can copy the HTML code of the blog post into VSCode, use Prettier or some extension like that to bring in some line breaks formatting for the typically one long string that Blogger generates for post conent, and use VSCode's superior features to add id attributes to required elements.

--------------------

Me (to ChatGPT in same chat, ''Blogger: Creating internal links easily", 2 Sep. 2025):  If I need this on regular basis, one possibility is using a JS library like Tocbot ***offline***. By that I mean, extracting the HTML of a post (manually or programmatically), run Tocbot on it to get a modified HTML which has id attributes attached to header sections, and save this file as a separate file. Next step I can use VSCode's file comparison feature to confirm that all changes made by Tocbot in the saved file are OK. If so, then I can copy paste that file's content into the blog post overwriting its HTML. Advantage of this as compared to invoking the Tocbot JS code inline in a post, is that in the latter case, under some circumstances, the JS code may not correctly update the HTML. Your views on above please.

ChatGPT: That is a very sharp idea and I think you have spotted the key distinction:

  • Inline/Template JS (Tocbot in Blogger) → runs at page load in the browser of the reader.

    • Pros: Automatic.

    • Cons: If the script fails (JS disabled, Blogger theme conflicts, script update issues), your post still has no IDs in the underlying HTML → links break.

  • Offline pre-processing with Tocbot (your idea) → you generate the IDs once on your local machine, verify them, and paste the final HTML back into Blogger.

    • Pros:

      • No runtime dependency.

      • Your published HTML has the IDs baked in → stable forever.

      • You can visually review the changes in VSCode (diff tool).

    • Cons:

      • Extra workflow step (extract → run Tocbot → verify → paste).

      • Still manual to some degree.

Why your offline approach is safer

  • Deterministic output → What you paste into Blogger is exactly what readers see.

  • No chance of runtime breakage → Even if a browser blocks JS or Blogger changes its template handling.

  • Easy verification → File diff ensures Tocbot did not do anything unexpected.

  • No external dependencies → After pasting, the post is self-contained.

This is exactly how some technical bloggers handle things: they pre-process posts with tools (Pandoc, Markdown → HTML converters, TOC generators) and only publish "final HTML".

Suggested Workflow

  1. Export Blogger post HTML.

  2. Run a local script with Tocbot (Node.js or even a small HTML+JS runner).

  3. Save the modified HTML → open side-by-side with original in VSCode → confirm IDs.

  4. Paste back into Blogger's HTML editor.

My view

 Your plan is much better than inline JS hacks if stability is your top priority.
 It's basically turning Tocbot into a pre-publish tool, instead of a live script.
 This gives you WordPress-like TOC/IDs while staying in Blogger.

------------------


Comments

Post a Comment