安装
首先安装 next 和 react:
npm install next react react-dom
然后还要安装下一个 mdx 插件、mdx 加载器和 Code Hike。
npm install @next/mdx @mdx-js/loader @code-hike/mdx
在项目的根目录下创建一个 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"
],
})
完成此步骤后,您可以在项目中使用 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"
],
})
您还可以传递更多选项,例如 lineNumbers
。有关详细信息,请参阅配置文档。
在 ContentLayer 中使用
Contentlayer 是一个内容预处理器,可将 MDX 文件转换为类型安全的 JSON,您可以轻松地导入到应用程序中。
Code Hike + Contentlayer 的演示可在 GitHub 上找到。您也可以在StackBlitz上的浏览器中试用它。
我们将它与Next.js一起使用,所以让我们从安装它开始:
npm install react react-dom next
我们还需要 Contentlayer 及其插件的依赖项:
npm install contentlayer next-contentlayer
当然,我们需要Code Hike:
npm install @code-hike/mdx
配置 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" }],
],
},
})
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;
重要的部分是第一行。使 use client
组件成为客户端组件。有了这个单独的组件,我们就可以使用Code Hike。