小编cko*_*ala的帖子

我想在我的 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,
  };
}

contentHtml 是在 [id].js 中获取的，我使用 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"; …