MDX 语法高亮在 Next.js 中不起作用答案

【问题标题】：MDX syntax highlighting is not working in Next.jsMDX 语法高亮在 Next.js 中不起作用
【发布时间】：2021-01-08 11:44:38
【问题描述】：

当导入插件@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"],
});

【问题讨论】：

对于那些正在寻求答案的人，只需导入您可以从prism下载的主题css。

标签： reactjs next.js mdxjs

【解决方案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）。并检查这些标签有class="language-xxx"。

【讨论】：