Custom Component In MDX and Nextjs

A guide to create reusable components

April 6, 2024 (8mo ago)| 📖 1 min read

Introduction

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

npm install remark-gfm

Custom 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.

Images

<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}
/>
GitHub Logo

Links

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

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

Syntax 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);
  }
}