如何在Electron+React项目中用md-to-pdf渲染KaTeX公式？

要让md-to-pdf正确渲染KaTeX公式，需要给它配置对应的remark/rehype插件，并引入KaTeX的样式文件，具体步骤如下：

1. 确认依赖已安装 #

确保项目中已安装remark-math、rehype-katex和katex（编辑器已用到相关依赖，若未安装则执行以下命令）：

npm install remark-math rehype-katex katex

2. 修改PDF生成代码 #

调用mdToPdf时添加插件配置与样式注入：

import { mdToPdf } from 'md-to-pdf';
import { writeFileSync, readFileSync } from 'fs';
import { dialog } from 'electron';
import { join } from 'path';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

// 读取KaTeX样式文件内容
const katexCss = readFileSync(join(__dirname, '../node_modules/katex/dist/katex.min.css'), 'utf8');

async function generatePdf(md, mainWindow) {
  let sReq = await dialog.showSaveDialog(mainWindow, {
    title: "Save PDF",
    filters: [{ name: "PDF", extensions: ["pdf"] }]
  });

  if (sReq.canceled) return;

  let pdf = await mdToPdf({
    content: md,
    // 启用数学公式语法识别
    remarkPlugins: [remarkMath],
    // 将数学公式转换为KaTeX渲染后的HTML
    rehypePlugins: [rehypeKatex],
    // 注入KaTeX样式，保证公式排版正确
    css: katexCss
  }).catch(console.error);

  if (pdf) {
    writeFileSync(sReq.filePath!, pdf.content);
  }
}

关键说明 #

• remarkMath：识别Markdown中的数学公式语法（如$...$行内公式、$$...$$块级公式）。
• rehypeKatex：把识别到的数学公式转换为KaTeX渲染后的HTML结构。
• KaTeX CSS：md-to-pdf生成PDF时依赖该样式渲染公式的排版与外观，缺少样式会导致公式显示为无格式文本或乱码。

内容的提问来源于stack exchange，提问作者clapmemereview