[{"data":1,"prerenderedAt":60},["Reactive",2],{"blog-post-markdown-link-to-section":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":36,"related":37},"markdown-link-to-section","How to Create Markdown Links to Sections","Learn to interlink sections with Markdown. Tutorial on creating navigable headers using Github-Flavored Markdown syntax.","Markdown gives the ease of writing in a simple, easy-to-read, and easy-to-write plain text format. This tutorial targets software engineers and other technical professionals learning about…","2024-05-06","Tutorial","Matthew Rathbone","Markdown link to section",2,"\u003Cp>Markdown gives the ease of writing in a simple, easy-to-read, and easy-to-write plain text format. This tutorial targets software engineers and other technical professionals learning about Markdown and will delve into how to link to a section within the same document - a very useful tool when creating lengthy Markdown documents. \u003C/p>\n\u003Cp>Each section is categorized under different headers (h2 and h3), and corresponding code snippets are included. The explanation of why and how the code works is also provided. This tutorial will specifically use Github-Flavored Markdown for the examples.\u003C/p>\n\u003Ch2 id=\"prerequisites\">Prerequisites\u003C/h2>\n\u003Cp>To make the most of this tutorial, you'll want basic familiarity with Markdown syntax.\u003C/p>\n\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Table of Contents:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#creating-headers\">Creating Headers\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#creating-links-to-headers\">Creating Links to Headers\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#dashes-and-spaces-in-header-links\">Dashes and Spaces in Header Links\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#additional-notes\">Additional Notes\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"creating-headers\">Creating Headers\u003C/h2>\n\u003Cp>In Markdown, Headers are created by using the pound sign (#). A single pound sign (#) creates an h1 header and increasing the number of pound signs escalates the header level accordingly. \u003C/p>\n\u003Cp>Generally, it's standard practice to skip h1 headers in Readme files as Github automatically provides one. \u003C/p>\n\u003Cp>Here's an example of how different levels of headers look in Github-Flavored Markdown:\u003C/p>\n\u003Cpre>\u003Ccode>## H2 Header\n### H3 Header\n#### H4 Header\n##### H5 Header\n###### H6 Header\n\u003C/code>\u003C/pre>\u003Cp>This will render as below:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-basic\">H2 Header\nH3 Header\nH4 Header\nH5 Header\nH6 Header\n\u003C/code>\u003C/pre>\u003Ch2 id=\"creating-links-to-headers\">Creating Links to Headers\u003C/h2>\n\u003Cp>Now, let's move onto how to create the links. \u003C/p>\n\u003Cp>Header links are created by using the link syntax in Markdown. The label is enclosed in brackets ([]), followed by the URL in parentheses (()). Here, the URL is replaced with the header to link to. \u003C/p>\n\u003Cpre>\u003Ccode>[Link to H2 Header](#h2-header)\n[Link to H3 Header](#h3-header)\n\u003C/code>\u003C/pre>\u003Cp>When you click on these links, you will be redirected to the section of corresponding headers.\u003C/p>\n\u003Ch2 id=\"dashes-and-spaces-in-header-links\">Dashes and Spaces in Header Links\u003C/h2>\n\u003Cp>Any spaces in the header will be replaced by a dash (-) in the URL. \u003C/p>\n\u003Cp>Additionally, all the text will be converted to lowercase, and any special characters except alphanumeric and dash (-) will be ignored in the URL. \u003C/p>\n\u003Cp>Consider the following example:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">### This is a test header.\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>Could be linked as follows:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">[\u003Cspan class=\"hljs-string\">Link to test header\u003C/span>](\u003Cspan class=\"hljs-link\">#this-is-a-test-header\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch2 id=\"additional-notes\">Additional Notes\u003C/h2>\n\u003Cp>It's essential to note that Github automatically adds these links to all of your headers by default. These are automatically generated based on the header text according to the rules stated above.\u003C/p>\n\u003Cp>If you want to get a link to a section, right-click on the section title and select 'Copy Link Address.'\u003C/p>\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Now you have a basic understanding of interlinking different sections inside a Markdown file. Interlinking will extensively improve the readability of your lengthy documents, making navigation effortless.\u003C/p>\n\u003Cp>Keep practicing, and for further references, you may refer to the official \u003Ca href=\"https://github.github.com/gfm/\">Github Flavored Markdown Guide\u003C/a>.\u003C/p>\n",[15,18,21,24,27,30,33],{"id":16,"text":17,"level":12},"prerequisites","Prerequisites",{"id":19,"text":20,"level":12},"overview","Overview",{"id":22,"text":23,"level":12},"creating-headers","Creating Headers",{"id":25,"text":26,"level":12},"creating-links-to-headers","Creating Links to Headers",{"id":28,"text":29,"level":12},"dashes-and-spaces-in-header-links","Dashes and Spaces in Header Links",{"id":31,"text":32,"level":12},"additional-notes","Additional Notes",{"id":34,"text":35,"level":12},"conclusion","Conclusion",[],[38,46,53],{"slug":39,"title":40,"description":41,"excerpt":42,"date":43,"category":9,"author":10,"keywords":44,"readingMinutes":45},"markdown-collapsible-sections-guide","How to Create Collapsible Sections in Markdown: Complete Guide","Learn how to create collapsible dropdown sections in Markdown using HTML details and summary tags. Improve document organization and user experience with expandable content.","Collapsible sections are an excellent way to organize long documents and improve user experience by allowing readers to expand only the content they need. While standard Markdown doesn't include…","2025-08-15","markdown collapsible sections, markdown dropdown, markdown toggle, collapsible markdown, markdown details summary, expandable markdown sections",6,{"slug":47,"title":48,"description":49,"excerpt":50,"date":51,"category":9,"author":10,"keywords":52,"readingMinutes":12},"markdown-email-links-using-mailto","How to Create Markdown Email Links Using Mailto","Learn the syntax to generate email links in Markdown with 'mailto', including adding subjects and body text with ease.","Markdown is a lightweight markup language that is used to add formatting elements to plain text. This article will focus on one of Markdown's powerful features—creating email links using \"mailto\".…","2024-07-16","Markdown email links using mailto",{"slug":54,"title":55,"description":56,"excerpt":57,"date":58,"category":9,"author":10,"keywords":59,"readingMinutes":12},"markdown-internal-links","Markdown Internal Links: How to Create Anchor Links","Learn how to use Markdown internal links for seamless navigation in documents. Create anchor links for improved document structure & reader experience.","Markdown internal links are a powerful tool to help users navigate your document. These internal links can direct your readers to different sections inside the current page or to a specific part…","2024-07-15","Markdown internal links",1792184940420]