# Markdown Syntax Cheatsheet

This page is about the [standard Markdown syntax](https://commonmark.org/) mapped to standard HTML element.

Note that you can add support for more with [unified plugins](remark-rehype-unified). By [default](remark-rehype-unified#default), we apply the [Remark Gfm](https://github.com/remarkjs/remark-gfm) to add the [GitHub Syntax](https://github.github.com/gfm/)

## List

| Name         | Markdown syntax                                                                                 | Equivalent HTML                                                                                                                                          |
| ------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| *a*          | ```markdown
[Combo](https://combostrap.com "title")
```                                         | ```html
<p><a href="https://combostrap.com" title="title">Combo</a></p>
```                                                                              |
| *blockquote* | ```markdown
> A greater than…
```                                                               | ```html
<blockquote>
  <p>A greater than…</p>
</blockquote>
```                                                                                          |
| *br*         | ```markdown
A backslash\
before a line break…
```                                               | ```html
<p>
  A backslash<br/>
  before a line break…
</p>
```                                                                                           |
| *code*       | ````markdown
Some `backticks` for inline.

```javascript
backtick.fences('for blocks')
```
```` | ```html
<p>
  Some <code>backticks</code> for inline.
</p>
<pre>
  <code className="language-javascript">backtick.fences('for blocks')</code>
</pre>
``` |
| *em*         | ```markdown
Some *asterisks* for emphasis.
```                                                  | ```html
<p>Some <em>asterisks</em> for emphasis.</p>
```                                                                                                 |
| *h1*         | ```markdown
# One number sign…
```                                                              | ```html
<h1>One number sign…</h1>
```                                                                                                                    |
| *h2*         | ```markdown
## Two number signs…
```                                                            | ```html
<h2>Two number signs…</h2>
```                                                                                                                   |
| *h3*         | ```markdown
### Three number signs…
```                                                         | ```html
<h3>Three number signs…</h3>
```                                                                                                                 |
| *h4*         | ```markdown
#### Four number signs…
```                                                         | ```html
<h4>Four number signs…</h4>
```                                                                                                                  |
| *h5*         | ```markdown
##### Five number signs…
```                                                        | ```html
<h5>Five number signs…</h5>
```                                                                                                                  |
| *h6*         | ```markdown
###### Six number signs…
```                                                        | ```html
<h6>Six number signs…</h6>
```                                                                                                                   |
| *hr*         | ```markdown
Three asterisks for a thematic break:

***
```                                      | ```html
<p>Three asterisks for a thematic break:</p>
<hr />
```                                                                                          |
| *img*        | ```markdown
![Alt text](/logo.png "title")
```                                                  | ```html
<p><img src="/logo.png" alt="Alt text" title="title" /></p>
```                                                                                  |
| *li*         | ```markdown
* asterisks for unordered items

1. decimals and a dot for ordered items
```        | ```html
<ul>
    <li>asterisks for unordered items</li>
</ul>
<ol>
    <li>decimals and a dot for ordered items</li>
</ol>
```                           |
| *ol*         | ```markdown
1. decimals and a dot for ordered
```                                               | ```html
<ol>
    <li>decimals and a dot for ordered</li>
</ol>
```                                                                                       |
| *p*          | ```markdown
Just some text…
```                                                                 | ```html
<p>Just some text…</p>
```                                                                                                                       |
| *pre*        | ````markdown
```javascript
backtick.fences('for blocks')
```
````                               | ```html
<pre><code class="language-javascript">backtick.fences('for blocks')
  </code></pre>
```                                                         |
| *strong*     | ```markdown
Two **asterisks** for strong.
```                                                   | ```html
<p>Two <strong>asterisks</strong> for strong.</p>
```                                                                                            |
| *ul*         | ```markdown
* asterisks for unordered
```                                                       | ```html
<ul>
    <li>asterisks for unordered</li>
</ul>
```                                                                                              |

## Ref

This table was adapted from [the Mdx table of components](https://mdxjs.com/table-of-components/)