Question

我想在我的Next.js博客中包含PrismJS以突出显示.md文件中的代码。降价在/lib/posts.js中使用remark和remark-html处理，并作为HTML传递给react-markdown

// /lib/posts.js

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");

  const matterResult = matter(fileContents);

  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

在[id] .js中获取contentHtml，在这里我使用ReactMarkdown渲染它。在这里，我要导入Prism，使用CodeBlock函数突出显示。我在prism.css旁边的_app.js中导入global.css

// /pages/_app.js

import Container from "../components/Container";
import "../styles/global.css";
import "../styles/prism.css";

export default ({ Component, pageProps }) => (
  <Container>
    <Component {...pageProps} />
  </Container>
);

// /pages/posts/[id].js

import { getAllPostIds, getPostData } from "../../lib/posts";
import ReactMarkdown from "react-markdown/with-html";
import Prism from "prismjs";

const CodeBlock = (language, values) => {
  return <Prism language={language}>{values}</Prism>;
};

export default function Post({ postData }) {
  return (
    <ReactMarkdown
      escapeHtml={false} // Dangerous if content is user-generated
      source={postData.contentHtml}
      renderers={{ code: CodeBlock }}
    />
  );
}

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

当我手动输入URL并按回车键时，它正在工作。与https://nextjs-blog-ivory-nine.vercel.app/posts/first-next-js-blog-devdiary中一样但是，当我从主页https://nextjs-blog-ivory-nine.vercel.app导航到第一篇文章时，代码不会被高亮显示。

你有什么主意吗？预先感谢！

Answer 1

我刚刚创建了一个可能会有所帮助的示例。它使用：

https://github.com/leerob/nextjs-prism-markdown

在带有注释的Next.js中使用PrismJS从markdown突出显示代码

1 个答案: