[{"data":1,"prerenderedAt":69},["Reactive",2],{"blog-post-markdown-horizontal-line":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":37,"related":45},"markdown-horizontal-line","Markdown Horizontal Line: Syntax, the Heading Gotcha, and Platform Differences","How to add a horizontal rule in Markdown with ---, *** or ___, why a line sometimes turns the text above it into a heading, and how Notion, Slack, Confluence and Jira handle it.","A horizontal line in Markdown (the spec calls it a \"thematic break\") is three or more hyphens, asterisks or underscores on a line by themselves. That part takes ten seconds to learn. The part that…","2024-05-06","Tutorial","Matthew Rathbone","Markdown horizontal line, markdown horizontal rule, markdown divider, markdown hr",3,"\u003Cp>A horizontal line in Markdown (the spec calls it a "thematic break") is three or more hyphens, asterisks or underscores on a line by themselves. That part takes ten seconds to learn. The part that trips people up is what happens when the line sits directly under a paragraph, and what happens on platforms that do not follow the standard.\u003C/p>\n\u003Ch2 id=\"the-syntax\">The syntax\u003C/h2>\n\u003Cp>Any of these produces a horizontal rule:\u003C/p>\n\u003Cpre>\u003Ccode>---\n***\n___\n\u003C/code>\u003C/pre>\u003Cp>Rules that apply in CommonMark and GitHub Flavored Markdown:\u003C/p>\n\u003Cul>\n\u003Cli>You need at least three characters.\u003C/li>\n\u003Cli>You cannot mix characters. \u003Ccode>-*-\u003C/code> is not a rule.\u003C/li>\n\u003Cli>Spaces between the characters are allowed, so \u003Ccode>- - -\u003C/code> and \u003Ccode>* * *\u003C/code> both work.\u003C/li>\n\u003Cli>You can indent the line by up to three spaces. Four spaces turns it into a code block.\u003C/li>\n\u003Cli>Put a blank line before and after it.\u003C/li>\n\u003C/ul>\n\u003Cp>That last rule matters more than the rest. Here is why.\u003C/p>\n\u003Ch2 id=\"the-gotcha-a-hyphen-line-under-text-becomes-a-heading\">The gotcha: a hyphen line under text becomes a heading\u003C/h2>\n\u003Cp>Markdown has a second, older heading syntax where you underline a line of text with \u003Ccode>===\u003C/code> for an H1 or \u003Ccode>---\u003C/code> for an H2. If you write this:\u003C/p>\n\u003Cpre>\u003Ccode>Some paragraph text\n---\n\u003C/code>\u003C/pre>\u003Cp>you do not get a paragraph followed by a line. You get an H2 that says "Some paragraph text". The fix is a blank line between the two:\u003C/p>\n\u003Cpre>\u003Ccode>Some paragraph text\n\n---\n\u003C/code>\u003C/pre>\u003Cp>Using \u003Ccode>***\u003C/code> or \u003Ccode>___\u003C/code> avoids the problem entirely, because only \u003Ccode>=\u003C/code> and \u003Ccode>-\u003C/code> underlines create headings. If you have ever seen a divider turn into a big bold title, this is the cause.\u003C/p>\n\u003Ch2 id=\"which-character-should-you-use\">Which character should you use?\u003C/h2>\n\u003Cp>All three are equivalent for the renderer. In practice:\u003C/p>\n\u003Cdiv class=\"table-responsive\">\u003Ctable class=\"table\">\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Style\u003C/th>\n\u003Cth>Good for\u003C/th>\n\u003Cth>Watch out for\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>---\u003C/code>\u003C/td>\n\u003Ctd>The most common choice, easy to type\u003C/td>\n\u003Ctd>Becomes a heading if there is no blank line above it. Also looks like YAML frontmatter delimiters\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>***\u003C/code>\u003C/td>\n\u003Ctd>Safe anywhere, never triggers a heading\u003C/td>\n\u003Ctd>Looks like bold markers at a glance\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>___\u003C/code>\u003C/td>\n\u003Ctd>Rarely used\u003C/td>\n\u003Ctd>Easy to confuse with an underline\u003C/td>\n\u003C/tr>\n\u003C/tbody>\u003C/table>\u003C/div>\n\u003Cp>A sensible default is \u003Ccode>---\u003C/code> with a blank line above and below it. If a file starts with frontmatter, remember that the first \u003Ccode>---\u003C/code> at the very top of the file opens the frontmatter block, so do not use a rule as the first line of a Jekyll or Hugo post.\u003C/p>\n\u003Ch2 id=\"platform-differences\">Platform differences\u003C/h2>\n\u003Cp>The standard syntax works in GitHub, GitLab, Obsidian, VS Code preview, Jekyll, Hugo and MkDocs. Other tools differ.\u003C/p>\n\u003Cp>\u003Cstrong>Notion.\u003C/strong> Typing \u003Ccode>---\u003C/code> in the editor creates a divider block. Pasting Markdown that contains \u003Ccode>---\u003C/code> also converts to a divider. This is one of the places where Notion behaves the way you would expect.\u003C/p>\n\u003Cp>\u003Cstrong>Slack.\u003C/strong> There is no horizontal rule at all in Slack messages. Lines of \u003Ccode>---\u003C/code> show up as literal text. Our \u003Ca href=\"/tools/markdown-to-slack\">Markdown to Slack converter\u003C/a> strips them for this reason. The common workaround is a row of box-drawing characters or an emoji line, which is purely visual.\u003C/p>\n\u003Cp>\u003Cstrong>Confluence and Jira.\u003C/strong> Wiki markup uses four hyphens, \u003Ccode>----\u003C/code>, on a line by itself. If you are converting Markdown for either one, the \u003Ca href=\"/tools/markdown-to-confluence\">Markdown to Confluence\u003C/a> and \u003Ca href=\"/tools/markdown-to-jira\">Markdown to Jira\u003C/a> tools translate the rule for you.\u003C/p>\n\u003Cp>\u003Cstrong>Word and email.\u003C/strong> A rule becomes a bordered empty paragraph in a Word document and an \u003Ccode><hr>\u003C/code> or a bordered table cell in HTML email. Both are handled in our \u003Ca href=\"/tools/markdown-to-docx\">Markdown to Word\u003C/a> and \u003Ca href=\"/tools/markdown-to-email-html\">Markdown to Email HTML\u003C/a> tools.\u003C/p>\n\u003Ch2 id=\"styling-the-line\">Styling the line\u003C/h2>\n\u003Cp>Markdown has no way to set the color, thickness or width of a rule. If you control the HTML, use an \u003Ccode><hr>\u003C/code> tag with a style attribute:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">hr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"border: 0; border-top: 2px solid #999; width: 50%;"\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>This works on GitHub and most static site generators, but not in Notion, Slack or any renderer that strips raw HTML. On a Jekyll or Hugo site, the better approach is to style \u003Ccode>hr\u003C/code> in your stylesheet so every rule in every post matches.\u003C/p>\n\u003Ch2 id=\"when-not-to-use-a-rule\">When not to use a rule\u003C/h2>\n\u003Cp>Headings do the job of dividing sections better than lines do, and they give you navigation and anchor links for free. A horizontal rule is best for a change of topic inside a section, a break before a footer or sign-off, or separating a callout from the main text. If you find yourself putting a rule before every heading, drop the rules.\u003C/p>\n\u003Ch2 id=\"check-your-output\">Check your output\u003C/h2>\n\u003Cp>If a rule is not rendering where you expect, paste the document into the \u003Ca href=\"/tools/markdown-editor\">Markdown Editor\u003C/a> to see the result live, or run it through the \u003Ca href=\"/tools/markdown-linter\">Markdown Linter\u003C/a> to catch layout problems. For a broader look at why Markdown renders differently between tools, see \u003Ca href=\"/blog/why-your-markdown-isnt-rendering\">Why Your Markdown Isn't Rendering\u003C/a> and the \u003Ca href=\"/blog/markdown-platform-compatibility-guide\">platform compatibility guide\u003C/a>.\u003C/p>\n",[15,19,22,25,28,31,34],{"id":16,"text":17,"level":18},"the-syntax","The syntax",2,{"id":20,"text":21,"level":18},"the-gotcha-a-hyphen-line-under-text-becomes-a-heading","The gotcha: a hyphen line under text becomes a heading",{"id":23,"text":24,"level":18},"which-character-should-you-use","Which character should you use?",{"id":26,"text":27,"level":18},"platform-differences","Platform differences",{"id":29,"text":30,"level":18},"styling-the-line","Styling the line",{"id":32,"text":33,"level":18},"when-not-to-use-a-rule","When not to use a rule",{"id":35,"text":36,"level":18},"check-your-output","Check your output",[38,39,40,41,42,43,44],"markdown-to-slack","markdown-to-confluence","markdown-to-jira","markdown-to-docx","markdown-to-email-html","markdown-editor","markdown-linter",[46,54,61],{"slug":47,"title":48,"description":49,"excerpt":50,"date":51,"category":9,"author":10,"keywords":52,"readingMinutes":53},"markdown-text-wrapping-line-length-management-complete-guide","Markdown Text Wrapping and Line Length Management: Complete Guide for Professional Documentation and Cross-Platform Compatibility","Master Markdown text wrapping, line length control, and formatting strategies for professional documentation. Learn automatic wrapping, manual breaks, editor configuration, and cross-platform compatibility techniques.","Markdown text wrapping and line length management are crucial for creating readable, maintainable documentation that renders consistently across different platforms, editors, and display…","2025-11-05","markdown text wrapping, line length markdown, markdown line breaks, text formatting, markdown editors, documentation standards, text width control, markdown best practices",20,{"slug":55,"title":56,"description":57,"excerpt":58,"date":59,"category":9,"author":10,"keywords":60,"readingMinutes":18},"markdown-force-line-break","How to Force a Line Break in Markdown","Learn to insert a line break in Markdown using spaces, backslashes, or HTML. Quick tips for structured, readable text formatting.","In this tutorial, we'll be discussing how to force a line break in Markdown and walk you through different examples.","2024-07-17","Markdown force line break",{"slug":62,"title":63,"description":64,"excerpt":64,"date":65,"category":9,"author":66,"keywords":67,"readingMinutes":68},"how-to-insert-a-line-break-in-markdown","How to insert a line break in markdown","Markdown is a lightweight markup language that allows users to format text using simple syntax. One common formatting feature is the ability to create line breaks, which can be used to separate…","2023-01-01","Matthew Rathbone (with help from OpenAI)","2/1/2023",1,1792184940297]