自定义 MDX 示例

让你可以在 Markdown 内容中直接插入 JSX 组件，如交互式嵌入、图表或提示等。

以下是一些 MDX 用法示例：

二级标题（h2）

三级标题（h3）

四级标题（h4）

五级标题（h5）

强调

这是加粗文本

这是斜体文本

引用

如果今天是我生命中的最后一天，我还会做今天要做的事吗？—— 史蒂夫·乔布斯

代码块

// 这是注释代码
export default function HelloWorld() {
  return (
    <h1>Hello, World!</h1>
  );
}

图片

Nextfolio 在 MDX 中使用 Next.js Image 实现无缝图片渲染：

<Image
  src="/opengraph-image.png"
  alt="OpenGraph 图片"
  width={640}
  height={500}
/>

渲染效果：

图片网格

Nextfolio 提供自定义的图片网格组件用于展示图片集。

<ImageGrid
  columns={3} // 支持 2、3 或 4 列
  images={[
    { src: "/photos/photo1.jpg", alt: "照片1", href: "#" },
    { src: "/photos/photo2.jpg", alt: "照片2", href: "#" },
    { src: "/photos/photo3.jpg", alt: "照片3"},
  ]}
/>

渲染效果：

嵌入内容

推文

Nextfolio 使用 react-tweet 在 MDX 文章中嵌入推文。

<StaticTweet id="1617979122625712128" />

渲染效果：

Andrej Karpathy

@karpathy

·Follow

The hottest new programming language is English

8:14 PM · Jan 24, 2023

44.8K

Reply

Copy link

Read 1.2K replies

YouTube 视频

Nextfolio 使用 react-youtube 在 MDX 文章中嵌入 YouTube 视频。

<YouTube videoId="wXhTHyIgQ_U" />

渲染效果：

标题说明

Nextfolio 使用 react-wrap-balancer 让 MDX 文章中的说明文字更美观。

<Caption>
  让说明文字自然换行，提升内容可读性和视觉美感。
</Caption>

渲染效果：

表格

Nextfolio 使用自定义表格组件渲染 MDX 文章中的表格。

<Table
  data={{
    headers: ["标题", "描述"],
    rows: [
      [
        "第一项",
        "这是第一项的描述内容。",
      ],
      [
        "第二项",
        "这是第二项的描述内容。",
      ],
    ],
  }}
/>

渲染效果：

数学公式

Nextfolio 支持在 MDX 文章中通过 KaTeX 渲染数学公式。只需用 $ 包裹表达式即可。

$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$

渲染效果：

$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$

提示块

Nextfolio 使用自定义提示组件在 MDX 文章中高亮重要信息。

<Callout emoji="💡">
[Nextfolio](https://nextfolio.site) 是一个简洁、快速的作品集博客，基于 Next.js、Tailwind CSS 和 pnpm 构建，性能优异。
</Callout>

渲染效果：