Блог

При импорте плагина @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 _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],
    },
  });
 

Если это все еще не работает, пожалуйста, найдите <pre> и <code> в html с помощью инструментов разработчика (нажмите F12).
и проверьте, есть ли у этих тегов class="language-xxx" .