MDX Reference
This is a reference page for html elements and their mdx equivalent
13th July 2022
Time to read: 1 min
<h1>
mdx:
# H1 heading
html:
<h1>H1 heading</h1>
<h2>
mdx:
## H2 heading
html:
<h2>H2 heading</h2>
<h3>
mdx:
### H3 heading
html:
<h3>H3 heading</h3>
<a>
mdx:
[a link](https://mdxjs.com "title")
html:
<a href="https://mdxjs.com" title="title">a link</a>
Displays:
a link
<blockquote>
mdx:
> A blockquote with some message.
html:
<blockquote>
<p>A blockquote with some message.</p>
</blockquote>
Displays:
A blockquote with some message.
<br>
mdx:
Add two spaces
to create a line break…
html:
<p>Add two spaces<br>
to create a line break…
</p>
Displays:
Add two spaces
to create a line break…
<code>
mdx:
```js
backtick.fences('for blocks')
```
html:
<pre>
<code class="language-js">backtick.fences('for blocks')</code>
</pre>
Displays:
backtick.fences('for blocks')
<em>
mdx:
Some *asterisks* for emphasis.
html:
<p>Some <em>asterisks</em> for emphasis.</p>
Displays:
Some asterisks for emphasis.
<hr>
mdx:
Three asterisks for a thematic break:
***
html:
<p>Three asterisks for a thematic break:</p>
<hr />
Displays:
Three asterisks for a thematic break:
<img>
![Alt text](./image.jpg "title")
Displays:
<ul>
mdx:
* oranges
* lemons
html:
<ul>
<li>oranges</li>
<li>lemons</li>
</ul>
displays:
- oranges
- lemons
<ol>
mdx:
1. oranges
2. lemons
html:
<ol>
<li>oranges</li>
<li>lemons</li>
</ol>
Displays:
- oranges
- lemons
Nested Lists
mdx:
* fruits
1. oranges
2. lemons
* vegetables
1. onions
2. cabbages
html:
<ul>
<li>fruits
<ol>
<li>oranges</li>
<li>lemons</li>
</ol>
</li>
<li>vegetables
<ol>
<li>onions</li>
<li>cabbages</li>
</ol>
</li>
</ul>
Displays:
- fruits
- oranges
- lemons
- vegetables
- onions
- cabbages
<p>
mdx:
Some text...
html:
<p>
Some text...
</p>
Displays:
Some text...
<strong>
mdx:
Some **strong** text...
html:
<p>
Some <strong>strong</strong> text...
</p>
Displays:
Some strong text...