Syntax highlight doesn't work properly.

[pannchat]

import Content from '!babel-loader!@mdx-js/loader!./content.mdx'

export default function App() {
  return <Content components={{code}}/>
}

function code({className, ...props}) {
  alert("s");
  const match = /language-(\w+)/.exec(className || '')
  return match
    ? <SyntaxHighlighter language={match[1]} PreTag="div" {...props} />
    : <code className={className} {...props} />
}

I made this code by referring to the official document.
But components={{}} It doesn't seem to work.
@mdx-js/loader": "^1.6.22
"react": "^17.0.2"

[wooorm]

See the note at the top of the website: it’s for MDX 2, which you can install with @next

[pannchat]

Thank you so much. But the next version is...

TypeError: this.getOptions is not a function
At Object.loader (node_modules/@mdx-js/loader/lib/index.js:23:55) is caused by a user.

I used the lower version. (i used CRA)

[wooorm]

Old docs: https://github.com/mdx-js/mdx/blob/master/docs/guides/syntax-highlighting.mdx.

[pannchat]

ah..! omg You've saved my life!! Have a good day.