Examples

Markdown examples and their HTML output

Each pair below shows real Markdown next to the exact HTML fragment the converter produces for it. Paste any of the input into the converter to see it rendered live.

Headings

# Getting Started

## Installation

Follow the steps below.

<h1 id="getting-started">Getting Started</h1>

<h2 id="installation">Installation</h2>

<p>Follow the steps below.</p>

Each heading gets a unique id, even if two headings share the same text: the second one becomes installation-2, and so on.

Bold, italic, and both

This is **bold**, this is *italic*,
and this is ***both***.

<p>This is <strong>bold</strong>, this is <em>italic</em>,
and this is <strong><em>both</em></strong>.</p>

Links and images

Read the [documentation](https://example.com/docs)
or view the diagram below.

![Architecture diagram](https://example.com/diagram.png)

<p>Read the <a href="https://example.com/docs"
rel="noopener noreferrer">documentation</a>
or view the diagram below.</p>

<p><img src="https://example.com/diagram.png"
alt="Architecture diagram"></p>

External links get rel="noopener noreferrer" automatically. Only safe HTTP, HTTPS, mailto, relative, and fragment URLs are turned into active links or images; schemes like javascript: or data: are rejected.

Lists

- First item
- Second item
- Third item

1. Read the input
2. Preview the output
3. Copy or download

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

<ol>
<li>Read the input</li>
<li>Preview the output</li>
<li>Copy or download</li>
</ol>

Inline code and fenced code blocks

Use the `convert()` function like this:

```python
def convert(markdown):
    return render(markdown)
```

<p>Use the <code>convert()</code> function
like this:</p>

<pre><code class="language-python">def convert(markdown):
    return render(markdown)</code></pre>

Text inside inline code or a fenced code block is never reprocessed as bold or italic, so `**not bold**` renders as literal text instead of <strong>.

Blockquotes

> Markdown makes writing portable.
> It renders the same everywhere.

<blockquote>
<p>Markdown makes writing portable. It renders
the same everywhere.</p>
</blockquote>

Hard line breaks

Roses are red,··
Violets are blue.

<p>Roses are red,<br>Violets are blue.</p>

Two or more trailing spaces before a newline (shown above as ··) produce a <br> instead of starting a new paragraph.

What's not interpreted

Tables, task lists (- [ ]), and strikethrough (~~text~~) are not currently part of the supported syntax and pass through as literal text. Raw HTML in your Markdown is escaped rather than rendered.

Try these in the converter