1

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

1 回答 1

1

你解决这个问题了吗？

可能做不到，所以我会写方法:)

无论如何导入prism.css（_app.tsx或js，jsx，ts）。 prism.css可以从prismjs.com/download下载。在下载之前，您可以选择您使用的主题和语言。此设置prism.css以 url 参数格式存储在顶部，因此您可以重新配置主题和语言，并使用此 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".

于 2021-09-12T08:38:39.980 回答