Converts CommonMark Markdown into valid HTML.

This site renders CommonMark Markdown. While learning all of the Markdown syntax may feel intimidating at first, learning how to use a very small number of the most basic Markdown syntax is very easy. The following sections will provide examples for commonly used Markdown syntax, what HTML output it generates and how it will display on the site.

Vertical Tabs

General

Paragraphs

Paragraphs are simply one or more consecutive lines of text, separated by one or more blank lines.
CommonMark (Markdown) / HTML OutputRendered
Paragraph one.

Paragraph two.

<p>Paragraph one.</p>
<p>Paragraph two.</p>

Paragraph one.

Paragraph two.

Line Breaks

If you want to insert a <br /> break tag, end a line with two or more spaces, then type return.
CommonMark (Markdown) / HTML OutputRendered
Text with  
line break

<p>Text with<br />
line break</p>

Text with
line break

Horizontal Rule

CommonMark (Markdown) / HTML OutputRendered
---

<hr />

___

<hr />

***

<hr />

Deleted text

The CommonMark spec does not (yet) have syntax for <del> formatting. You must manually specify them.
CommonMark (Markdown) / HTML OutputRendered
<del>Deleted</del>

<del>Deleted</del>
Deleted

Emphasized text

CommonMark (Markdown) / HTML OutputRendered
_Emphasized_

<em>Emphasized</em>
Emphasized
*Emphasized*

<em>Emphasized</em>
Emphasized

Strong text

CommonMark (Markdown) / HTML OutputRendered
__Strong__

<strong>Strong</strong>
Strong
**Strong**

<strong>Strong</strong>
Strong
Block Quotes
CommonMark (Markdown) / HTML OutputRendered
> Block quoted

Normal text

<blockquote>
<p>Block quoted</p>
</blockquote>
<p>Normal text

Block quoted

Normal text

> Nested block quotes
>> Nested block quotes
>>> Nested block quotes
>>>> Nested block quotes

Normal text

<blockquote>
<p>Nested block quotes</p>
<blockquote>
<p>Nested block quotes</p>
<blockquote>
<p>Nested block quotes</p>
<blockquote>
<p>Nested block quotes</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<p>Normal text

Nested block quotes

Nested block quotes

Nested block quotes

Nested block quotes

Normal text

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Normal text

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>
<p>Normal text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Normal text

Code

Inline code

CommonMark (Markdown) / HTML OutputRendered
`Coded`

<code>Coded</code>
Coded

Fenced code blocks

CommonMark (Markdown) / HTML OutputRendered
```
Fenced code block
```

<pre><code>Fenced code block
</code></pre>
Fenced code block
~~~
Fenced code block
~~~

<pre><code>Fenced code block
</code></pre>
Fenced code block
    Fenced code block - indented using 4+ spaces

<pre><code>Fenced code block - indented using 4+ spaces
</code></pre>
Fenced code block - indented using 4+ spaces
	Fenced code block - indented using tab

<pre><code>Fenced code block - indented using tab
</code></pre>
Fenced code block - indented using tab

Fenced code blocks (using languages)

CommonMark (Markdown) / HTML OutputRendered
```css
.selector {
  color: #ff0;
  font-size: 10px;
  content: 'string';
}
```

<pre><code class="language-css">.selector {
  color: #ff0;
  font-size: 10px;
  content: 'string';
}
</code></pre>
.selector {
  color: #ff0;
  font-size: 10px;
  content: 'string';
}
```js
var $selector = $('#id');
$selector.foo('bar', {
  'baz': true,
  'value': 1
});
```

<pre><code class="language-js">var $selector = $('#id');
$selector.foo('bar', {
  'baz': true,
  'value': 1
});
</code></pre>
var $selector = $('#id');
$selector.foo('bar', {
  'baz': true,
  'value': 1
});
```php
$build['table'] = array(
  '#theme' => 'table',
  '#header' => $header,
  '#rows' => $rows,
  '#sticky' => FALSE,
);
print drupal_render($build);
```

<pre><code class="language-php">$build['table'] = array(
  '#theme' =&gt; 'table',
  '#header' =&gt; $header,
  '#rows' =&gt; $rows,
  '#sticky' =&gt; FALSE,
);
print drupal_render($build);
</code></pre>
$build['table'] = array(
  '#theme' => 'table',
  '#header' => $header,
  '#rows' => $rows,
  '#sticky' => FALSE,
);
print drupal_render($build);
Headings
CommonMark (Markdown) / HTML OutputRendered
# Heading 1

<h1>Heading 1</h1>

Heading 1

## Heading 2

<h2>Heading 2</h2>

Heading 2

### Heading 3

<h3>Heading 3</h3>

Heading 3

#### Heading 4

<h4>Heading 4</h4>

Heading 4

##### Heading 5

<h5>Heading 5</h5>
Heading 5
###### Heading 6

<h6>Heading 6</h6>
Heading 6
Images

Images

CommonMark (Markdown) / HTML OutputRendered
![Alt text](http://lorempixel.com/400/200/ "Title text")

<img src="http://lorempixel.com/400/200/" alt="Alt text" title="Title text" />
Alt text

Referenced images

CommonMark (Markdown) / HTML OutputRendered
Lorem ipsum dolor sit amet

![Alt text]

Lorem ipsum dolor sit amet

[Alt text]: http://lorempixel.com/400/200/ "Title text"

<p>Lorem ipsum dolor sit amet</p>
<p><img src="http://lorempixel.com/400/200/" alt="Alt text" title="Title text" /></p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Alt text

Lorem ipsum dolor sit amet

Lists

Ordered lists

CommonMark (Markdown) / HTML OutputRendered
1. First item
2. Second item
3. Third item
4. Fourth item

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1) First item
2) Second item
3) Third item
4) Fourth item

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1. All start with 1
1. All start with 1
1. All start with 1
1. Rendered with correct numbers

<ol>
<li>All start with 1</li>
<li>All start with 1</li>
<li>All start with 1</li>
<li>Rendered with correct numbers</li>
</ol>
  1. All start with 1
  2. All start with 1
  3. All start with 1
  4. Rendered with correct numbers
1. First item
2. Second item
   1. First nested item
   2. Second nested item
      1. Deep nested item

<ol>
<li>First item</li>
<li>Second item
<ol>
<li>First nested item</li>
<li>Second nested item
<ol>
<li>Deep nested item</li>
</ol>
</li>
</ol>
</li>
</ol>
  1. First item
  2. Second item
    1. First nested item
    2. Second nested item
      1. Deep nested item
5. Start at fifth item
6. Sixth item
7. Seventh item
8. Eighth item

<ol start="5">
<li>Start at fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
<li>Eighth item</li>
</ol>
  1. Start at fifth item
  2. Sixth item
  3. Seventh item
  4. Eighth item

Unordered lists

CommonMark (Markdown) / HTML OutputRendered
- First item
- Second item

<ul>
<li>First item</li>
<li>Second item</li>
</ul>
  • First item
  • Second item
- First item
- Second item
  - First nested item
  - Second nested item
    - Deep nested item

<ul>
<li>First item</li>
<li>Second item
<ul>
<li>First nested item</li>
<li>Second nested item
<ul>
<li>Deep nested item</li>
</ul>
</li>
</ul>
</li>
</ul>
  • First item
  • Second item
    • First nested item
    • Second nested item
      • Deep nested item
* First item
* Second item

<ul>
<li>First item</li>
<li>Second item</li>
</ul>
  • First item
  • Second item
+ First item
+ Second item

<ul>
<li>First item</li>
<li>Second item</li>
</ul>
  • First item
  • Second item
HTML Entities

Most unusual characters can be directly entered without any problems.

If you do encounter problems, try using HTML character entities. A common example looks like &amp; for an ampersand & character. For a full list of entities see HTML's entities page. Some of the available characters include:

EntityHTML codeRendered
Ampersand&amp;&
Bullet&bull;
Cent&cent;¢
Copyright sign&copy;©
Dagger&dagger;
Dagger (double)&Dagger;
Dash (em)&mdash;
Dash (en)&ndash;
Euro sign&euro;
Horizontal ellipsis&hellip;
Greater than&gt;>
Less than&lt;<
Middle dot&middot;·
Non-breaking space&nbsp; 
Paragraph&para;
Per mille sign&permil;
Pound sterling sign (GBP)&pound;£
Registered trademark&reg;®
Quotation mark&quot;"
Trademark&trade;
Yen sign&yen;¥
Allowed HTML Tags
Allowed HTML tags:
<a> <abbr> <address> <blockquote> <br> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <img> <kbd> <li> <ol> <p> <pre> <small> <span> <strong> <sub> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <ul>