bash
npm install @next/mdx @mdx-js/loader @mdx-js/react

js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure `pageExtensions`` to include MDX files
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
}
 
const withMDX = createMDX({
  extension: /\.mdx?$/,
  // Add markdown plugins here, as desired
  options: {
    remarkPlugins: [remarkFrontmatter],
    rehypePlugins: []
  }
})
export default withMDX(nextConfig)

tsx
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: (props) => {
      return (
        <h1>
          <div id={props.id} className="invisible relative -top-24"></div>
          <a href={"#" + props.id} id={"#" + props.id}>
            {props.children}
          </a>
        </h1>
      )
    },
    ……
    code: (info) => {
      const { children } = info
      const id = Math.random().toString(36).substr(2, 9)
      if (info["data-language"]) {
        return (
          <div className="not-prose rounded-md border">
            <div className="flex h-12 items-center justify-between bg-zinc-100 px-4 dark:bg-zinc-900">
              <div className="flex items-center gap-2">
                <span className="text-sm text-zinc-600 dark:text-zinc-400">
                  {/* @ts-ignore */}
                  {info["data-language"]}
                </span>
              </div>
              <CopyButton1 id={id} />
            </div>
            <div className="overflow-x-auto">
              <div id={id} className="p-4">
                {children}
              </div>
            </div>
          </div>
        )
      } else {
        return (
          <code
            {...info}
            className="not-prose rounded bg-gray-100 px-1 dark:bg-zinc-900"
          >
            {children}
          </code>
        )
      }
    },
    ...components
  }
}

tsx
export default function MdxLayout({ children }: { children: React.ReactNode }) {
  return <div className="markdown m-auto max-w-5xl">{children}</div>
}

markdown
## Vue3 编译宏
 
### defineProps
 
- 父子组件传参
 
```vue filename="index.js"
<template>
  <div>
    <Child name="xiaoman"></Child>
  </div>
</template>
<script lang="ts" setup>
  import Child from "./views/child.vue"
</script>
<style></style>
```

tsx
type FrontmatterProps = {
  date: string
  author: string
  // 其它元数据，如分类、标签、来源、阅读时长等
}
 
export default function Frontmatter({ date, author }: FrontmatterProps) {
  return (
    <div className="my-4 rounded-r border-l-4 border-gray-200 bg-gray-50 px-4 py-3">
     {date}{author}
    </div>
  )
}

markdown
import Frontmatter from "@/components/Frontmatter"
 <Frontmatter date="2024-02-22" />
...md内容

bash
pnpm install next-mdx-remote

tsx
import { CopyButton1 } from "@/components/CopyButton"
import { getPostById } from "@/lib/post"
import { MDXRemote } from "next-mdx-remote/rsc"
export default async function RemoteMdxPage() {
  const post = await getPostById(3)
  if (!post) return <div>Post not found</div>
  const markdown = post.content
  const mdxOptions = {
    remarkPlugins:[]
    rehypePlugins:[]
  }
  const components = {}
  return (
    <MDXRemote
      source={markdown}
      options={mdxOptions}
      components={components}
    />
  )
}
 

bash
npm install rehype-pretty-code shiki

ts
    rehypePlugins: [
      () => (tree) => {
        visit(tree, (node) => {
          if (node?.type === "element" && node?.tagName === "pre") {
            const [codeEl] = node.children
            if (codeEl.tagName !== "code") return
            node.raw = codeEl.children?.[0].value
          }
        })
      },
      [
        rehypePrettyCode,
        {
          theme: "material-theme-lighter"
        }
      ],
      () => (tree) => {
        visit(tree, (node) => {
          if (node?.type === "element") {
            if (!("data-rehype-pretty-code-fragment" in node.properties)) {
              return
            }
            for (const child of node.children) {
              if (child.tagName === "pre") {
                child.properties["raw"] = node.raw
              }
            }
          }
        })
      }
    ]

bash
pnpm install @jsdevtools/rehype-toc

tsx
rehypePlugins: [
  ...config
 [
   //@ts-ignore
   toc,
   {
     headings: ["h1", "h2", "h3", "h4", "h5"],
     customizeTOC: (tocAll: any) => {
          data = tocAll
          return false
     }
   }
 ]
]

tsx
"use client"
import clsx from "clsx"
import { useEffect, useState } from "react"
 
export default function MarkdownNav(props: any) {
  switch (props.tagName) {
    case "nav": {
      return (
        <nav {...props.properties}>
          {props.children.map((item: any, index: number) => {
            return <MarkdownNav {...item} key={index} />
          })}
        </nav>
      )
    }
    case "ol": {
      return (
        <ol {...props.properties}>
          {props.children.map((item: any, index: number) => {
            return <MarkdownNav {...item} key={index} />
          })}
        </ol>
      )
    }
    case "li": {
      return (
        <li {...props.properties}>
          {props.children.map((item: any, index: number) => {
            return <MarkdownNav {...item} key={index} />
          })}
        </li>
      )
    }
    case "a": {
      return (
        <>
          <a
            {...props.properties}
          >
            {props.children.map((item: any, index: number) => {
              return <MarkdownNav {...item} key={index} />
            })}
          </a>
        </>
      )
    }
    default:
      return <>{props.value}</>
  }
}

bash
pnpm install react-markdown

tsx
import { type Post } from "@/lib/post"
import ReactMarkdown from "react-markdown"
import rehypeHighlight from "rehype-highlight"
import rehypeRaw from "rehype-raw"
import rehypeSlug from "rehype-slug"
import remarkGfm from "remark-gfm"
 
export default function ReactMarkdownCom({ post }: { post: Post }) {
  return (
    <ReactMarkdown
      rehypePlugins={[rehypeHighlight, rehypeSlug, rehypeRaw, remarkGfm]}
      components={}
    >
      {post.content}
    </ReactMarkdown>
  )
}