Convert Markdown to HTML
Paste Markdown on the left, click “Convert” and copy the HTML on the right.
Understanding Markdown Syntax
Markdown is a lightweight markup language with plain-text formatting syntax. It's designed to be easily readable and writable by humans, and easily convertible to HTML. The core idea behind Markdown is to allow you to write using an easy-to-read, easy-to-write plain text format, and then convert it to structurally valid HTML.
Common Markdown Elements:
- Headings: Use `#` for headings. The number of `#` symbols corresponds to the HTML heading level (e.g., `# Heading 1` becomes `
`, `## Heading 2` becomes `
`).
- Paragraphs: Simply type text. Two or more spaces at the end of a line, followed by a new line, create a line break (`
`). A blank line creates a new paragraph (``).
- Bold Text: Wrap text with two asterisks or two underscores (e.g., `**bold**` or `__bold__`). This converts to `` in HTML.
- Italic Text: Wrap text with a single asterisk or underscore (e.g., `*italic*` or `_italic_`). This converts to `` in HTML.
- Lists:
- Unordered Lists: Use `*`, `-`, or `+` followed by a space (e.g., `- Item 1`).
- Ordered Lists: Use numbers followed by a period and a space (e.g., `1. Item 1`).
- ` and `
- `.
- Links: Use `[Link Text](URL)` (e.g., `[Google](https://www.google.com)`). This becomes an `` tag.
- Images: Use `` (e.g., ``). This creates an `
` tag.
- Blockquotes: Start a line with `>` (e.g., `> This is a quote.`). This becomes a `
`.
- Code:
- Inline Code: Wrap text with single backticks (e.g., `` `console.log()` ``). This converts to `
`.
- Code Blocks: Wrap multiple lines of code with three backticks (```) or indent lines with four spaces. This becomes a `
` block.
- Inline Code: Wrap text with single backticks (e.g., `` `console.log()` ``). This converts to `
- Horizontal Rules: Use three or more hyphens, asterisks, or underscores on a line (e.g., `---`). This creates an `
` tag.
- ` HTML tags respectively, with list items as `
How Markdown is Converted to HTML
The conversion process from Markdown to HTML is straightforward but powerful. When you use a Markdown converter tool (like this one), a parser reads your Markdown text line by line. This parser has a set of rules that map Markdown syntax to corresponding HTML tags.
Here's a simplified breakdown of the process:
- Parsing: The Markdown parser scans the input text, identifying specific patterns (e.g., `#` at the start of a line, `**` around text).
- Tokenization: Once a pattern is identified, the parser breaks it down into "tokens" or distinct elements. For example, `**bold**` might be tokenized as a "bold start," "text content," and "bold end."
- HTML Generation: Based on the identified tokens and the parser's rules, the corresponding HTML tags are generated.
- A line starting with `#` is wrapped in `
` tags.
- Text wrapped in `**` becomes `` content.
- A line starting with `-` becomes an `
- ` element within a `
- `.
- `[Text](URL)` is transformed into `Text`.
- A line starting with `#` is wrapped in `
- Output: The final result is a string of HTML code that can be directly embedded into a webpage.
The beauty of Markdown is that it handles the complex HTML syntax for you, allowing you to focus on your content while ensuring it's web-ready.