在 Next.js 中集成 KaTeX 与 React Markdown 的最佳实践

介绍

技术博客的一个重要特点就是需要渲染大量的 数学公式 和 代码片段。普通的 Markdown 渲染器往往无法胜任，这就需要引入一些高级插件。在这篇博文中，我们将探讨这一架构。

核心依赖

我们采用了以下核心库：

• react-markdown

  ：React 生态中最流行的 Markdown 解析器。

• remark-math

  与

  rehype-katex

  ：用于解析和渲染 LaTeX 数学公式。

• remark-gfm

  ：支持 GitHub Flavored Markdown（如表格和任务列表）。

渲染数学公式

下面是一个行内公式测试：$E = mc^2$。

对于复杂的独立公式，使用

$$

包裹：

$$\mathcal{L} = -\frac{1}{N}\sum_{i=1}^{N} \left[ y_i \log(\hat{y}_i) + (1-y_i)\log(1-\hat{y}_i) \right]$$

代码高亮

这里是一个在 React 中使用钩子（Hook）的示例：

import React, { useState, useEffect } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  );
}

引用

优秀的架构并不是一次性设计出来的，而是随着业务需求逐渐演进而来的。

总结

通过

rehype-katex

与本地 Markdown 文件的结合，我们可以非常优雅地实现静态博客与动态互动的完美融合。