MDX Basic Guide

July 14, 2022

Headings:

MDX


    # Heading 1

    ## Heading 2

    ### Heading 3

    #### Heading 4

    ##### Heading 5

    ###### heading 6

HTML thats going to render.


    <h1>Heading 1</h1>

    <h2>Heading 2</h2>

    <h3>Heading 3</h3>

    <h4>Heading 4</h4>

    <h5>Heading 5</h5>

    <h6>Heading 6</h6>

Results

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
heading 6

Paragraphs:

MDX


    This is a praghraph.

    this is another.

HTML thats going to render.


    <p>This is a paragraph</p>

    <p>This is another</p>

Results

This is a paragraph.

this is another

Line Breaks:

This one is a bit tricky, you have to end the line with two or more spaces.

MDX


    First line.  
    Second line.

HTML thats going to render.


    <p>First line</br>
    Second line</p>

Results

First line.
Second line.

Emphasis:

MDX


    **Bold text**
    
    __Another bold text__

    *Itialic text*

    _Another italic text_

    ***A bold and italic text***

    ___Another bold and italic___

HTML thats going to render.


    <strong>Bold text</strong>

    <strong>Another bold text</strong>

    <em>Italic text</em>

    <em>Another italic text</em> 

    <em><strong>A bold and italic</strong></em>

    <em><strong>Another bold and italic</strong></em>

Results

Bold text

Another bold text

Italic text

Another italic text

A bold and italic text

Another bold and italic

BlockQuotes:

MDX


    >This is a quote paragraph

    >This is a 
    >
    >multiple paragraphs quote

    >this is a quote paraghraph
    >
    >> with a nested quote paragraph

    > ### Blockquote with a heading:
    >
    > - with a list item
    > - another list item
    >
    > *some italic text* and also some **bold**

HTML thats going to render.

    <blockquote>
        <p>"This is a quote paragraph"</p>
    </blockquote>

    <blockquote>
        <p>"This is a"</p>
        <p>"multiple paragraphs quote"</p>
    </blockquote>

    <blockquote>
        <p>"This is a quote paragraph"</p>
        <blockquote>
            <p>"with a nested quote paragraph"</p>
        <blockquote>
    </blockquote>

    <blockquote>
        <h3>Blockquote with a heading</h3>
        <ul>
            <li>with a list item</li>
            <li>another list item</li>
        </ul>
        <p>
            <em>some italic text</em> " and also some " <strong>bold</strong>
        </p>
    </blockquote>

Results

This is a quote paragraph.

This is a

multiple paragraphs quote

this is a quote paraghraph

with a nested quote paragraph

Blockquote with a heading:

  • with a list item
  • another list item

some italic text and also some bold

Lists:

This one is a bit tricky, you have to end the line with two or more spaces.

MDX


    1. first item of ordered list
    2. second item of ordered list 
        1. indented item

    - first item of unodrdered list
    - second item of unordered list 
        - indented item

    - 1900\. borns Benjamin Franklin
    - 1856\. dies Benjamin Franklin

    - list first item
    - list second item

        A paragraph

        > a blockquote inside a list

    - list third item

HTML thats going to render.


    <ol>
        <li>"first item of ordered list"</li>
        <li>"second item of ordered list"</li>
            <ol>
                <li>"indented item"</li>
            </ol>
    </ol>

    <ul>
        <li>"first item of ordered list"</li>
        <li>"second item of ordered list"</li>
            <ul>
                <li>"indented item"</li>
            </ul>
    </ul>

    <ul>
        <li>"1986. borns Benjamin Franklin"</li>
        <li>"1900. dies Benjamin Franklin"</li>
    </ul>

    <ul>
        <li><p>first item of unordered list</p></li>
        <li>
            <p>second item of unordered list</p>
            <p>A paragraph</p>
            <blockquote>
                <p>"A blockquote inside a list"</p>
            </blockquote>
        </li>
        <li>third item of unordered list</li>
    </ul>

Results

  1. first item of ordered list
  2. second item of ordered list
    1. indented item

Escaping Characters and Code Blocks:

MDX

Im using four backticks for scaping the inside code.


    \* escaping an asterisk
    \\ escaping a backslash
    \` escaping a backtick
    \[] escaping brackets
    \{} escaping curly braces
    and so on...

    ```

        for escaping a code block I'm adding
        more than three backticks in the outer block.

    ```

HTML thats going to render.


    <p>* escaping an asterisk</p>
    <p>\ escaping a backslash</p>
    <p>` escaping a backtick</p>
    <p>[] escaping brackets</p>
    <p>{} escaping curly braces</p>
    <p>and so on...<p>

    <pre>
        <code>
            " ``` for escaping a code block I'm adding more than three backticks in the outer block. ``` "
        </code>
    </pre>

Results

* escaping an asterisk

\ escaping a backslash

` escaping a backtick

[] escaping brackets

{} escaping curly braces

and so on...

    Hi from the outer code block.

    ```

    for escaping a code block I'm adding
    more than three backticks in the outer block.

    ```

Code:

MDX

Im using four backticks for scaping the inside code.


    This is inline code `const func = (params) => { console.log(params) };`
    
    ```js

        let thisIsACodeBlock = true 

        console.log(thisIsACodeBlock);
        
    ```

HTML thats going to render.


    <p>" This is inline code "
    <code>
        "const func = (params) => { console.log(params) }"
    </code>
    </p>

    <pre>
        <code class=languaje-js> let thisIsACodeBlock = true; console.log(thisIsACodeBlock); </code>
    </pre>

Results

This is inline code const func = (params) => { console.log(params) };


    let thisIsACodeBlock = true;

    console.log(thisIsACodeBlock);

MDX


    [Back to Home page](https://theotherflaneur.vercel.app/ "This link goes to the home page")

HTML thats going to render.


    <a href="direction">link name</a>

Results

Back to Home page

Back to home