MDX cheatsheet

MDX cheatsheet

References

  • Switch between mardown and mdx: https://wooorm.com/markdown-tm-language/

Concept

  • MDX is a programming language that gets compiled to JavaScript: https://github.com/orgs/mdx-js/discussions/2288#discussioncomment-5709551

Declare / use variable

  • You need an empty newline after export. Otherwise, you will get Could not parse import/exports with acorn. 
    export const myName ="Joe"

My name is {myName.toUpperCase()}

Escape angle bracket

Add backtick to escape angle brackets: 
`<title>abc</title>`

Collapsible

<details>
    <summary>Click me</summary>
    
    ### Heading
    1. Expand by defaut set: details open
    2. Bar
        * Baz
        * Qux

    ### Some Javascript
    ```js
    function logSomething(something) {
        console.log('Something', something);
    }
    ```
</details>
Click me

Heading

  1. Expand by defaut set: details open
  2. Bar
    • Baz
    • Qux

Some Javascript

function logSomething(something) {
    console.log('Something', something);
}

Blockquote

<blockquote> is not part of the original Markdown syntax.

<blockquote>
This is a blockquote.
</blockquote>

Advanced concepts

?? Pass variable to block codes / code fences

  • Ref: https://github.com/orgs/mdx-js/discussions/2288#discussioncomment-5709551

    {/* This is a link to { props.link } */}
[Click me]({ props.link })

{/* This is a link to whatever link is passed as the link prop */}
<a href={props.link}>Click me</a>

<pre><code>{`Hello ${frontmatter.title}`}</code></pre>