Skip to main content

MDX ↔ Markdown+JSX

Source: mdxjs.com/

MDX support JS expressions inside {}

MDX support IIFE

MDX support import export statements for ES Module

{/ to Comment in MDX /}

!can't only declare variables - must export also - else will render plaintext!

@mdx-js/rollup plugin to work with Vite

@next/mdx to work with next

Front Matter​

YAML Metadata header for MD set by --- wrapper - front section of book/md.

Source: mdxjs.com/guides/frontmatter/

to add image​

![_alt_for_img](/abs/path/to/img.png)

mdx to static html

import remarkGfm from "remark-gfm"
import rehypeHighlight from "rehype-highlight"
import { renderToString } from "react-dom/server"
import * as runtime from "react/jsx-runtime.js"
import { evaluateSync } from "@mdx-js/mdx"
import { createElement } from "react"

export default function MDX_to_HTML(body: string) {
  const mdx = evaluateSync(body, {
    ...(runtime as any),
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeHighlight],
  }).default

  return renderToString(createElement(mdx))
}

References​

  1. docusaurus ↔ React Framework SSG CMS for API docs as SPA with built-in Routing + MDX support

  2. react-markdown ↔ React Lib FC Wrapper to render MDX extends with plugins

  3. Node script demo ↔ the aim of releasing the code is to showcase how to transform a complex JSON object, structured like a Relational Database, into a feature-rich MDX static site.