A practical guide to generating a Table of Contents (ToC) for blog posts using JavaScript and browser DevTools. Covers how to query DOM heading elements, convert them to Markdown links or nested HTML lists, and handle platform-specific quirks for freeCodeCamp, DEV.to, and Medium. Includes code snippets for both Markdown and HTML output formats, plus tips for platforms without standard heading IDs.

8m read timeFrom freecodecamp.org
Post cover image
Table of contents
Table of ContentsBrowser Dev ToolsJavaScript ConsoleUnderstanding the DOM StructureHow to Create the ToC in MarkdownHow to Create an HTML ToCCopy the HTML code for the editorWhat to Do If I Don’t Have Headers?Conclusion

Sort: