This auto-header-ids-toc VSCode extension with display name of Auto Header IDs and TOC automatically adds an id attribute to HTML header elements in the current document and can also generate a Table of Contents (TOC).
This feature can be used to auto generate Table of Contents with internal links to h1 (Major Heading) and h2 (Heading) section headers in Blogger blog posts (involves editing post HTML in VSCode). For instructions on how to do that, please see my blog post.
By default, this extension adds id attributes to <h1> and <h2> elements. It processes the header text to generate a unique, URL-friendly ID.
The ID value is generated by converting the header text to lowercase, replacing spaces and HTML entities (like ) with hyphens, removing special characters, and truncating the result to a maximum of 15 characters to keep it concise. If a generated ID is not unique, a counter is appended to ensure uniqueness (e.g., section-1, section-2).
The extension provides three commands accessible from the Command Palette (F1 or Ctrl+Shift+P):
Auto Header IDs and TOC: Add IDs to Headers: Addsidattributes to headers that do not already have one. Headers withclass="no-toc"are skipped.Auto Header IDs and TOC: Create Table of Contents: Generates a Table of Contents based on headers that have anidand do not have theclass="no-toc"attribute.Auto Header IDs and TOC: Mark Configured Headers as no-toc: Adds theclass="no-toc"attribute to headers, which preventsidattribute from being created for them and prevents them from being included in the TOC. A confirmation prompt will appear before this action. This command is useful for preparing HTML content which has its own headers (matching the headersToProcess Extension Setting), but which should not be included in the TOC. Once no-toc class is added to these headers, the associated HTML content can be safely added to the main document as both Add IDs to Headers command and Create Table of Contents command will ignore these headers. This command should be used with caution as it modifies all headers of the configured types in the document and so should not typically be used directly on documents which already have IDs added to configured headers by Add IDs to Headers command.
Note that all commands operate on the entire document, regardless of the current cursor position or selection. Only variation is that the Create Table of Contents command inserts the TOC at the current cursor position.
This extension is not yet available on the Visual Studio Code Marketplace. To install it, you must use the .vsix file from the releases page.
- Download the latest
auto-header-ids-toc-*.vsixfile from the releases. - In VS Code, open the Extensions view (
Ctrl+Shift+X). - Click the three dots
...in the top right corner. - Select "Install from VSIX..." and choose the downloaded file.
This extension contributes the following setting, which you can modify in your VS Code settings.json file:
-
auto-header-ids-toc.headersToProcess: An array of strings that specifies which header elements should have IDs added.Example: To add IDs to only
<h2>and<h3>tags, you would add the following to yoursettings.json:"auto-header-ids-toc.headersToProcess": ["2", "3"]
The default value is
["1", "2"].
The source code for this extension is available on GitHub: https://github.com/ravisiyer/html-auto-header-ids
- Created blog post on how to use the extension to auto generate Table of Contents in Blogger posts.
- Updated README with link to blog post.
- Renamed extension to
auto-header-ids-tocto reflect added TOC functionality. - Added new commands:
auto-header-ids-toc.markHeadersAsNoTOCandauto-header-ids-toc.createTOC. - Improved slug generation logic.
Initial release of auto-header-ids.
This extension was developed by Ravi S. Iyer with assistance from Gemini.
This extension is licensed under the MIT License. The full text of the license can be found in the LICENSE file in the project's repository.