MDX Reference

This is a reference page for html elements and their mdx equivalent

#MDX

13th July 2022

Time to read: 1 min

Logo

<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:
Alt text

<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:

  1. oranges
  2. 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
    1. oranges
    2. lemons
  • vegetables
    1. onions
    2. 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...

PreviousReact Helmet