在 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 文件的结合，我们可以非常优雅地实现静态博客与动态互动的完美融合。