在 Next.js App目录中使用 Code Hike

安装

首先安装 next 和 react：

npm install next react react-dom
1

然后还要安装下一个 mdx 插件、mdx 加载器和 Code Hike。

npm install @next/mdx @mdx-js/loader @code-hike/mdx
1

在项目的根目录下创建一个 next.config.js 文件。

我们使用插件 @next/mdx 来设置 MDX 导入。

在 withMDX 函数内部，我们传递下一个JS配置。如果要直接在目录中写入 MDX 文件，请确保在 "md" pageExtensions 设置中包含 和 "mdx" 。 pages

const withMDX = require("@next/mdx")({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
  },
})

module.exports = withMDX({
  pageExtensions: [
    "ts", "tsx", "js", 
    "jsx", "md", "mdx"
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13

完成此步骤后，您可以在项目中使用 MDX 文件，但还不能使用 Code Hike。

要设置 Code Hike，您需要导入 @code-hike/mdx 插件，并将其添加到文件中的 remarkPlugins next.config.js 数组中。

在插件旁边，您可以传递一个配置对象。几乎总是你会想通过那里 theme 。有关主题的更多信息，请参阅主题文档。

const {
  remarkCodeHike,
} = require("@code-hike/mdx")

const withMDX = require("@next/mdx")({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [
      [remarkCodeHike, { theme: "nord" }]
    ],
  },
})

module.exports = withMDX({
  pageExtensions: [
    "ts", "tsx", "js", 
    "jsx", "md", "mdx"
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

您还可以传递更多选项，例如 lineNumbers 。有关详细信息，请参阅配置文档。

在 ContentLayer 中使用

Contentlayer 是一个内容预处理器，可将 MDX 文件转换为类型安全的 JSON，您可以轻松地导入到应用程序中。

Code Hike + Contentlayer 的演示可在 GitHub 上找到。您也可以在StackBlitz上的浏览器中试用它。

我们将它与Next.js一起使用，所以让我们从安装它开始：

npm install react react-dom next
1

我们还需要 Contentlayer 及其插件的依赖项：

npm install contentlayer next-contentlayer
1

当然，我们需要Code Hike：

npm install @code-hike/mdx
1

配置 contentlayer.config.js：

import { remarkCodeHike } from "@code-hike/mdx"

const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: `**/*.mdx`,
  contentType: "mdx",
}))
export default makeSource({
  contentDirPath: "posts",
  documentTypes: [Post],
  mdx: {
    remarkPlugins: [
      [remarkCodeHike, { theme: "nord" }],
    ],
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

FAQ

我正在使用MDX，Contentlayer，代码高亮提示我正在使用精彩的Code Hike库。

Next.js 13 在使用内容层和应用程序目录时遇到了一些问题，但此问题已在 Next.js 的 13.0.3 版本中修复。

但是当我尝试集成Code Hike时，应用程序失败并显示以下错误 TypeError: ke.createContext is not a function 。

我们可以通过将 Markdown 组件作为客户端组件来修复错误：

"use client";

import { useMDXComponent } from "next-contentlayer/hooks";

type Props = {
  code: string;
};

const Markdown = ({ code }: Props) => {
  const MDXComponent = useMDXComponent(code);
  return (
    <div className="prose prose-zinc">
      <MDXComponent />
    </div>
  );
};

export default Markdown;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

重要的部分是第一行。使 use client 组件成为客户端组件。有了这个单独的组件，我们就可以使用Code Hike。