Created by John Gruber in 2004, Markdown was designed with one specific goal in mind: to be easy to read in its raw state.
Unlike HTML, which is cluttered with <tags> that make it difficult for humans to quickly scan, Markdown uses familiar punctuation marks to format text. A word surrounded by asterisks becomes bold. A line starting with a hash becomes a heading.
The Problem with WYSIWYG
Before Markdown took over, content management systems relied heavily on WYSIWYG (What You See Is What You Get) editors. While these editors are great for non-technical users, developers hate them for several reasons:
- Bloated Output: WYSIWYG editors often generate terrible, inline-styled HTML that is a nightmare to clean up.
- Keyboard Flow: To make a word bold in a WYSIWYG editor, you have to take your hands off the keyboard, use the mouse to highlight the word, and click a 'B' icon. In Markdown, you just type
**bold**and keep writing. - Version Control: Markdown is just plain text. This means it works perfectly with Git. You can easily diff two versions of a Markdown file to see exactly what changed. Diffing the output of a WYSIWYG editor is almost impossible.
How Markdown Converts to HTML
While Markdown is great for writing, browsers don't understand it. To display a Markdown document on a webpage, it must be compiled into HTML.
This is usually done using a parsing library (like marked or markdown-it in the JavaScript ecosystem). The parser reads the plain text, identifies the syntax tokens (like a # symbol), and maps them to their equivalent HTML elements (like an <h1> tag).
Convert Markdown Instantly
Need to quickly grab the HTML equivalent of your Markdown document? Our free tool converts Markdown to sanitized HTML in real-time.
Security Warning: XSS
Because Markdown allows you to embed raw HTML directly within the document, it can be a significant vector for Cross-Site Scripting (XSS) attacks. If you allow users to submit Markdown on your application, and you compile and render that Markdown on your frontend, a malicious user could embed a <script> tag in their Markdown.
To prevent this, you must always sanitize the output HTML before injecting it into the DOM. The industry standard tool for this in JavaScript is DOMPurify, which strips out any dangerous scripts or event handlers from the HTML string.