如何在Next.js markdown博客上进行语法突出显示

npm install prismjs react-syntax-highlighter

// prism.js
import Prism from 'prismjs';
import 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
// ...其他语言支持
import 'prismjs/themes/prism-tomorrow.css'; // 引入主题CSS

// Markdown.js
import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import Prism from './prism';

const Markdown = ({ content }) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: Prism.highlight(content, Prism.languages.markdown) }} />
  );
};

export default Markdown;

// BlogPost.js
import React from 'react';
import Markdown from './Markdown';

const BlogPost = ({ content }) => {
  return (
    <div>
      <h1>My Blog Post</h1>
     <Markdown content={content} />
    </div>
  );
};

export default BlogPost;