Skip to content

hamlim/inline-mdx.macro

Repository files navigation

inline-mdx.macro

Babel Macro

npm version

A babel-macro for converting mdx into an inline component.

/** @jsx mdx */
import { mdx } from '@mdx-js/react'
import { inline } from 'inline-mdx.macro'

const SomeMDXComponent = inline`

## This is some MDX source

<SomeComponent />

~~strikethrough~~
`

generates...

/** @jsx mdx */
import { mdx } from '@mdx-js/react'
const SomeMDXComponent = ...;
// you can now do <SomeMDXComponent />

⚠️ Important! ⚠️

You must add the following to any file using the inline macro:

/** @jsx mdx */
import { mdx } from '@mdx-js/react'

This ensures mdx picks up on the jsx code and renders it correctly.

Changes from v0 to v1:

  • Updated to MDX v1
  • Removed the import macro
  • Template strings are now formatted first using the dedent library