Custom Component In MDX and Nextjs

Link to IntroductionIntroduction

If you want to used Github Flavoured Markdown install remark-gfm

npm install remark-gfm

Link to Custom Component guideCustom Component guide

Here is my MDX file for Component mdx.tsx

You can refer Lee Robinson's file as well as Max Leiter's file for more components.

Link to ImagesImages

<img
  className='mx-auto rounded border border-zinc-600 shadow hover:border-black'
  src='https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
  alt='GitHub Logo'
  width={400}
  height={400}
/>

Link to LinksLinks

//just like Link in Next js
<Link href="/">Home</Link>

// Just like a tag
<Link href="http://github.com">GitHub</Link>

home GitHub

Link to Syntax highlightingSyntax highlighting

In MDX you can do highlighting with sugar-high . It support Server Component by default.

```jsx
function log({ title }) {
  if (title) {
    console.log('title', title)
  }
}
```

Simple function

function log({ title }) {
  if (title) {
    console.log('title', title)
  }
}