MDX语法高亮显示在Next.js中不起作用

Question

导入插件@mapbox/rehype-prism时，它似乎没有像预期的那样对语法高亮显示做任何事情。

//next.config.js
const rehypePrism = require("@mapbox/rehype-prism");
const withMDX = require("@next/mdx")({
extension: /.mdx?$/,
options: {
rehypePlugins: [rehypePrism],
},
});
module.exports = withMDX({
pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
});

Answer 1

你解决这个问题了吗？

它可能无法完成，所以我将编写方法：(

无论如何，在_app.tsx(或js、jsx、ts(中导入prism.css。prism.css可以从prismjs.com/download下载。在下载之前，您可以选择您使用的主题和语言。此设置以url参数格式存储在prism.css的顶部，因此您可以通过使用此url访问来重新配置主题和语言。

import React from 'react';
import xxx
import yyy
import '../styles/prism.css`

你解决了吗？

如果没有，请按照我的参考代码解决。

import React from 'react';
import { GetStaticProps } from 'next';
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize';
import rehypePrism from '@mapbox/rehype-prism';
import Statics from './next-statics.config';
import MdxComponents from './mdx-components.config';
type MdxPrismProps = {
source: MDXRemoteSerializeResult;
};
const MdxPrism: React.FC<MdxPrismProps> = ({ source }) => {
return <MDXRemote {...source} components={MdxComponents} />;
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const postFilePath = path.join(Statics.path.posts, `${params.slug}.mdx`);
const source = fs.readFileSync(postFilePath);
const { content } = matter(source);
const mdxSource = await serialize(content, {
mdxOptions: {
rehypePlugins: [rehypePrism],
},
});
return {
props: {
source: mdxSource,
},
};
};
export default MdxPrism;

也许您可以使用前面代码的以下部分来解决问题。

const mdxSource = await serialize(content, {
mdxOptions: {
rehypePlugins: [rehypePrism],
},
});

如果这仍然不起作用，请通过开发人员工具在html中找到<pre>和<code>(按F12(。并检查这些标签是否具有CCD_ 8。