[{"data":1,"prerenderedAt":40},["Reactive",2],{"blog-post-add-table-of-contents-to-markdown-using-javascript":3},{"slug":4,"title":5,"description":6,"excerpt":6,"date":7,"category":8,"author":9,"keywords":10,"readingMinutes":11,"html":12,"headings":13,"tools":14,"related":15},"add-table-of-contents-to-markdown-using-javascript","Add table of contents to markdown using JavaScript","A table of contents, or TOC, is a useful navigation tool for long documents, allowing readers to quickly jump to different sections of the text. In markdown, a lightweight markup language used for…","2023-01-10","Tutorial","Matthew Rathbone (with help from OpenAI)","5/31/2023",2,"\u003Cp>A table of contents, or TOC, is a useful navigation tool for long documents, allowing readers to quickly jump to different sections of the text. In markdown, a lightweight markup language used for formatting text, adding a TOC can be done using JavaScript.\u003C/p>\n\u003Cp>First, create the structure of the TOC using HTML and CSS. This can be done by creating a container element, such as a div, and then adding nested list items for each section of the document. The list items should have hyperlinks that correspond to the sections they represent.\u003C/p>\n\u003Cp>Next, use JavaScript to automatically generate the TOC based on the headings in the markdown document. This can be done by using the querySelectorAll method to select all the headings in the document, and then iterating over them to create the list items for the TOC.\u003C/p>\n\u003Cp>To add the hyperlinks, use the id attribute of the heading elements. If the headings do not have an id, you can use the textContent property to generate a unique id for each heading.\u003C/p>\n\u003Cp>Finally, use JavaScript to automatically update the TOC when the user scrolls through the document. This can be done by using the scroll event to track the user's position and then updating the active class on the TOC list items accordingly.\u003C/p>\n\u003Cp>Here is an example of JavaScript code that can be used to generate a TOC for a markdown document:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"toc"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n  \u003Cspan class=\"hljs-comment\">// Get all headings\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">var\u003C/span> headings = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">"h1, h2, h3, h4, h5, h6"\u003C/span>);\n  \n  \u003Cspan class=\"hljs-comment\">// Create TOC container\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">var\u003C/span> toc = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">"toc"\u003C/span>);\n  \n  \u003Cspan class=\"hljs-comment\">// Iterate over headings\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">var\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < headings.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n    \u003Cspan class=\"hljs-keyword\">var\u003C/span> heading = headings[i];\n    \n    \u003Cspan class=\"hljs-comment\">// Create TOC list item\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">var\u003C/span> li = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">"li"\u003C/span>);\n    li.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = heading.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Add hyperlink to TOC list item\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">var\u003C/span> link = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">"a"\u003C/span>);\n    link.\u003Cspan class=\"hljs-property\">href\u003C/span> = \u003Cspan class=\"hljs-string\">"#"\u003C/span> + heading.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n    link.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(li);\n    \n    \u003Cspan class=\"hljs-comment\">// Add TOC list item to TOC container\u003C/span>\n    toc.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(link);\n  }\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>This is a basic example of how to add a table of contents to a markdown document using JavaScript. There are many ways to customize and enhance the functionality of the TOC, such as using a library like jQuery to simplify the code, or using CSS to style the TOC. Additionally, you can also add the functionality to show and hide the TOC and make it more interactive.\u003C/p>\n",[],[],[16,25,33],{"slug":17,"title":18,"description":19,"excerpt":20,"date":21,"category":8,"author":22,"keywords":23,"readingMinutes":24},"how-to-create-table-of-contents-in-markdown","How to Create a Table of Contents in Markdown: Complete Guide","Learn how to create and customize table of contents in Markdown using automatic generation, manual methods, and platform-specific solutions. Includes examples for GitHub, Jekyll, and more.","Creating a table of contents (TOC) in Markdown helps readers navigate long documents efficiently. While standard Markdown doesn't include built-in TOC functionality, there are several effective…","2025-08-08","Matthew Rathbone","table of contents markdown, markdown toc, automatic table of contents markdown, markdown navigation, github table of contents",5,{"slug":26,"title":27,"description":28,"excerpt":29,"date":30,"category":8,"author":22,"keywords":31,"readingMinutes":32},"how-to-add-comments-in-markdown","How to Add Comments in Markdown: A Complete Guide","Learn different methods to add comments in Markdown files. Discover HTML comments, invisible text techniques, and best practices for documentation.","Comments in Markdown are essential for adding notes, reminders, or explanations that won't appear in the rendered output. Unlike many programming languages, Markdown doesn't have native comment…","2025-08-02","comments in markdown, markdown comments, how to comment markdown",4,{"slug":34,"title":35,"description":36,"excerpt":37,"date":38,"category":8,"author":22,"keywords":39,"readingMinutes":11},"javascript-markdown-example","Javascript Markdown Parsing with Markdown-it: A Guide","Discover how to parse and generate markdown in Javascript using Markdown-it, with practical examples for easy markdown-to-HTML conversion.","Markdown, a lightweight markup language with plain text formatting syntax, has gained immense popularity due to its ease of use and broad compatibility. This article will guide you on how to parse…","2024-04-26","Javascript markdown example",1792184940252]