Next.js 让 Markdown 文档转换 HTML 后高亮代码块指南

2023-12-28 01:26:05

在 Next.js 应用中，将 Markdown 文档转换为 HTML 时，通常需要对代码块进行高亮处理，以提高可读性和理解性。本文将提供一步步的指南，指导您如何使用 Next.js 实现 Markdown 文档到 HTML 的转换并高亮代码块。

步骤 1：安装依赖项

首先，在您的 Next.js 项目中安装 Prism 和 rehype-prism 插件：

npm install prismjs rehype-prism

步骤 2：创建 Markdown 解析器

接下来，创建 Markdown 解析器，该解析器使用 rehype-prism 插件：

import remark from 'remark'
import html from 'remark-html'
import prism from 'rehype-prism-plus'

const markdownToHtml = (markdown) => {
  return remark()
    .use(html)
    .use(prism)
    .process(markdown)
}

步骤 3：在 getStaticProps 中转换 Markdown

在 Next.js 中，您可以在 getStaticProps 函数中将 Markdown 文档转换为 HTML：

export async function getStaticProps(context) {
  const markdown = fs.readFileSync('path/to/markdown.md', 'utf-8')
  const html = await markdownToHtml(markdown)

  return {
    props: {
      html,
    },
  }
}

步骤 4：在组件中呈现 HTML

最后，在您的组件中呈现转换后的 HTML：

export default function MyComponent({ html }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  )
}

示例代码

以下是一个示例 Next.js 页面，展示了如何将 Markdown 文档转换为 HTML 并高亮代码块：

import Head from 'next/head'
import MyComponent from './MyComponent'

export default function Page() {
  return (
    <>
      <Head>
        
        <link rel="stylesheet" href="https://unpkg.com/prismjs@1.28.0/themes/prism.css" />
      </Head>

      <MyComponent html={html} />
    </>
  )
}

export async function getStaticProps(context) {
  const markdown = fs.readFileSync('path/to/markdown.md', 'utf-8')
  const html = await markdownToHtml(markdown)

  return {
    props: {
      html,
    },
  }
}