[{"data":1,"prerenderedAt":35},["Reactive",2],{"blog-post-tabs-in-markdown":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":33,"related":34},"tabs-in-markdown","Using Tabs in Markdown: A How-To Guide","Learn to use tabs and indentation in Markdown, particularly with GitHub-flavored Markdown for code blocks, tables, and lists.","Markdown is a popular lightweight markup language appreciated for its simplicity. It can be used to create formatted documents and is often used to generate HTML. This tutorial will focus on how…","2024-07-24","Tutorial","Matthew Rathbone","Tabs in markdown",2,"\u003Ch2 id=\"introduction-to-tabs-in-markdown\">Introduction to Tabs in Markdown\u003C/h2>\n\u003Cp>Markdown is a popular lightweight markup language appreciated for its simplicity. It can be used to create formatted documents and is often used to generate HTML. This tutorial will focus on how to use tabs or indentations in Markdown. However, it's important to know that syntax for tabbed content is not standardized, and its functionality may look different across markdown interpreters. For the purpose of this guide, we are going to use GitHub-flavored Markdown (a popular strain of markdown) as a basis.\u003C/p>\n\u003Cp>We'll cover code blocks with indents, markdown tables and inserting tab content within lists.\u003C/p>\n\u003Ch2 id=\"indentation-with-code-blocks\">Indentation with Code Blocks\u003C/h2>\n\u003Cp>Three backticks are commonly used to denote a code block in GitHub-flavored Markdown. You can also use indents to provide code blocks. \u003C/p>\n\u003Cp>For simple indents, you use a \u003Ccode>Tab\u003C/code> or \u003Ccode>Four\u003C/code> spaces, as shown:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-code\">    This is a code block created by indentation.\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>When you want to indent further, add another tab or four more spaces.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-code\">    This is the first level of indentation.\n        This is the second level of indentation.\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"markdown-tables\">Markdown Tables\u003C/h2>\n\u003Cp>Tables are not part of the core Markdown spec, but they are part of GitHub-Flavored Markdown. If you wish to introduce tabbed content in tables, you can use the following format. \u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Head1     | Head2     | Head3    |\n|-----------|-----------|----------|\n| Content1  | Content2  | Content3 |\n| Content4  | Content5  | Content6 |\n\u003C/code>\u003C/pre>\u003Cp>Expected Output:\u003C/p>\n\u003Cdiv class=\"table-responsive\">\u003Ctable class=\"table\">\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Head1\u003C/th>\n\u003Cth>Head2\u003C/th>\n\u003Cth>Head3\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Content1\u003C/td>\n\u003Ctd>Content2\u003C/td>\n\u003Ctd>Content3\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>Content4\u003C/td>\n\u003Ctd>Content5\u003C/td>\n\u003Ctd>Content6\u003C/td>\n\u003C/tr>\n\u003C/tbody>\u003C/table>\u003C/div>\n\u003Ch2 id=\"inserting-tab-content-in-lists\">Inserting Tab Content in Lists\u003C/h2>\n\u003Cp>You can indent text within a list item by using either a tab or four spaces:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-bullet\">1.\u003C/span> Item 1\n\u003Cspan class=\"hljs-code\">    This is indented text under Item 1.\n2. Item 2\n    This is indented text under Item 2.\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>Expected Output:\u003C/p>\n\u003Col>\n\u003Cli>Item 1\u003Cbr> This is indented text under Item 1.\u003C/li>\n\u003Cli>Item 2\u003Cbr> This is indented text under Item 2.\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"a-note-on-different-flavors-of-markdown\">A Note on Different Flavors of Markdown\u003C/h2>\n\u003Cp>It is noteworthy that there are different flavors of markdown and some aspects of these examples notably the use of indentation to create code blocks, or the ability to use tables might not render as expected depending on the Markdown Interpreter. \u003C/p>\n\u003Cp>Always check the documentation of the specific interpreter for any differences. For example, while Github supports the convenient use of three backticks to encase a code block (```), you might need to use indentation in other platforms.\u003C/p>\n\u003Cp>For more information on how to further manipulate text within markdown beyond tabs and indentation, you can read our article on various markdown tutorials \u003Ca href=\"/blog/guide-to-blockquotes-in-markdown\">here\u003C/a>.\u003C/p>\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Proper indentation and tabbing are a vital part of any programming language or markup language, including Markdown. It helps to keep the content organized and improves readability. Although Markdown doesn't support tabbing directly, you can achieve the desired effect using the methods mentioned above.\u003C/p>\n",[15,18,21,24,27,30],{"id":16,"text":17,"level":12},"introduction-to-tabs-in-markdown","Introduction to Tabs in Markdown",{"id":19,"text":20,"level":12},"indentation-with-code-blocks","Indentation with Code Blocks",{"id":22,"text":23,"level":12},"markdown-tables","Markdown Tables",{"id":25,"text":26,"level":12},"inserting-tab-content-in-lists","Inserting Tab Content in Lists",{"id":28,"text":29,"level":12},"a-note-on-different-flavors-of-markdown","A Note on Different Flavors of Markdown",{"id":31,"text":32,"level":12},"conclusion","Conclusion",[],[],1792184940750]