[{"data":1,"prerenderedAt":41},["Reactive",2],{"blog-post-add-a-warning-box-alert-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":15,"related":17},"add-a-warning-box-alert-in-markdown","How to Create a Warning Box Alert in Markdown","Learn two simple methods to add a warning box or alert in Markdown using blockquotes or HTML. Enhance your docs with visible alerts.","In the world of documentation, alert boxes play a crucial role in drawing attention to important pieces of information. In Markdown, these boxes, also often referred to as warning boxes, are not…","2024-07-11","Tutorial","Matthew Rathbone","Add a warning box / alert in Markdown",2,"\u003Cp>In the world of documentation, alert boxes play a crucial role in drawing attention to important pieces of information. In Markdown, these boxes, also often referred to as warning boxes, are not native features. However, there are ways we can implement this into our Markdown syntax with certain flavors of Markdown. \u003C/p>\n\u003Cp>In this tutorial, we will explore two methods of adding a warning box or an alert to your Markdown content. First, using the blockquote syntax with specific keywords, and second, using HTML within your Markdown. \u003C/p>\n\u003Ch3 id=\"method-1-using-blockquotes\">Method 1: Using Blockquotes\u003C/h3>\n\u003Cp>The blockquote method is the easiest way to create an alert or warning box in your markdown. It works well with Github-flavored and other similar flavors of Markdown. \u003C/p>\n\u003Cp>In Markdown, a blockquote is created with a '>' symbol followed by a space. Anything following this symbol on the same line will be included in the blockquote.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-quote\">> \u003Cspan class=\"hljs-strong\">**WARNING**\u003C/span>: This is a warning message! Be careful!\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>When rendered, the output will be:\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>WARNING\u003C/strong>: This is a warning message! Be careful!\u003C/p>\n\u003C/blockquote>\n\u003Cp>Although it does not look like the conventional warning box, it stands out from the main body of the document, serving the basic purpose of a warning box.\u003C/p>\n\u003Cp>On some platforms and with some styles, it will be displayed with a vertical line or a different background color.\u003C/p>\n\u003Cp>However, there's no guarantee that this will look like a traditional alert box on every platform because the presentation of blockquotes depends on the platform's CSS markdown rendering. This is one reason you might prefer using HTML instead (explained below).\u003C/p>\n\u003Cp>You can familiarize yourself more with how blockquotes work in markdown using this detailed guide on our blog \u003Ca href=\"/blog/guide-to-blockquotes-in-markdown\">here\u003C/a>.\u003C/p>\n\u003Ch3 id=\"method-2-using-html\">Method 2: Using HTML\u003C/h3>\n\u003Cp>Markdown allows for HTML to be used within its content as markdown translators simply ignore HTML tags. This allows for more customizable rendered output.\u003C/p>\n\u003Cp>Here is an example of adding a warning box using HTML:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"alert"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Warning!\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> This is a warning alert.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>The output will be highly dependent on your CSS, but if you have an "alert" class with certain styles it could appear as a traditional warning or alert box.\u003C/p>\n\u003Cp>An important thing to remember is that when using HTML in markdown, the inner text must use HTML tags as markdown syntax will not be recognized.\u003C/p>\n\u003Cp>HTML provides more customization and the possibility of creating traditional alert boxes. However, not all Markdown processors preserve the HTML tags. Therefore, it's important to understand the \u003Ca href=\"https://daringfireball.net/projects/markdown/syntax#html\">markdown specifications\u003C/a> of your specific environment.\u003C/p>\n\u003Cp>Note: If you're working with React, check out our tutorial on \u003Ca href=\"/blog/rendering-markdown-in-react\">Rendering Markdown in React\u003C/a>, which will guide you on how to safely render markdown content that includes HTML.\u003C/p>\n\u003Ch3 id=\"generate-it-automatically-or-see-how-it-renders-elsewhere\">Generate It Automatically, or See How It Renders Elsewhere\u003C/h3>\n\u003Cp>If you'd rather not hand-type the blockquote or HTML each time, our \u003Ca href=\"/tools/markdown-callouts\">Markdown Callout Generator\u003C/a> builds the syntax for you. And if you're targeting a platform beyond GitHub — Obsidian, MkDocs, Docusaurus — note that GitHub's \u003Ccode>[!WARNING]\u003C/code>-style syntax doesn't carry over to those; see our \u003Ca href=\"/blog/markdown-callouts-admonitions-across-platforms\">callout and admonition rendering guide across platforms\u003C/a> for what each one actually expects.\u003C/p>\n\u003Ch3 id=\"conclusion\">Conclusion\u003C/h3>\n\u003Cp>While Markdown does not natively support warning or alert boxes, we can still create similar structures using blockquotes or HTML. These methods aren't foolproof but serve as a suitable way to highlight important information. To ensure your Markdown renders as expected across different platforms, always check the specifics of your Markdown processor or environment.\u003C/p>\n",[],[16],"markdown-callouts",[18,26,34],{"slug":19,"title":20,"description":21,"excerpt":22,"date":23,"category":9,"author":10,"keywords":24,"readingMinutes":25},"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":27,"title":28,"description":29,"excerpt":30,"date":31,"category":9,"author":10,"keywords":32,"readingMinutes":33},"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","table of contents markdown, markdown toc, automatic table of contents markdown, markdown navigation, github table of contents",5,{"slug":35,"title":36,"description":37,"excerpt":38,"date":39,"category":9,"author":10,"keywords":40,"readingMinutes":12},"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","Markdown link to section",1792184940591]