logo
0
1
Login
Shiqi Wang<qtec@outlook.com>
docs(build): 添加重新编译 LaTeX 引擎的开发者指导

Markdown to LaTeX 转换工具 📝

一个优雅的在线 Markdown 到 LaTeX 转换工具,特别强化了表格处理能力。

✨ 核心特性

🎯 智能表格处理(核心特色)

  • 自动环境选择:根据表格特征智能选择最优 LaTeX 环境(tabular、tabularx、longtable)
  • 列宽自动计算:基于内容长度智能分配列宽,确保排版美观
  • 自动换行处理:长文本单元格自动启用换行,避免溢出
  • 专业样式:支持 booktabs 专业表格样式

📝 完整 Markdown 支持

  • 标题(H1-H6)
  • 文本样式(粗体、斜体、删除线、行内代码)
  • 列表(有序、无序、嵌套)
  • 代码块(支持语法高亮配置)
  • 链接和图片
  • 引用块
  • 数学公式(行内和块级)

⏩ 实时预览

  • 300ms 防抖优化
  • 即时查看 LaTeX 输出
  • 支持长文档处理
  • 纯前端 PDF 编译:使用 SwiftLaTeX WebAssembly 引擎,完全在浏览器中运行

🌐 PDF 生成(纯前端)

  • SwiftLaTeX 引擎
    • 基于 WebAssembly 的 XeTeX 引擎
    • 完全在浏览器中运行,无需后端服务
    • 完整支持中文和 Unicode
    • 支持离线使用(首次加载后)
    • 编译质量与本地 XeLaTeX 一致

📤 多种导出方式

  • 下载 LaTeX 源码文件(.tex)
  • 一键复制到剪贴板
  • 完整文档结构(包含宏包声明)

⚙️ 灵活配置

  • 文档类选择(article、report、book)
  • 字体大小(10pt、11pt、12pt)
  • 页面尺寸(A4、Letter、A5)
  • 中文支持开关
  • 表格样式偏好
  • 自动换行阈值调整

🚀 快速开始

安装依赖

npm install

开发模式

npm run dev

访问 http://localhost:5173

生产构建

npm run build

构建产物在 dist/ 目录下,可直接部署到任意静态托管平台。

📖 使用说明

基本使用

  1. 编辑 Markdown:在左侧编辑器中输入或粘贴 Markdown 内容
  2. 实时预览:右侧自动显示生成的 LaTeX 代码
  3. 导出:点击"复制"或"下载"按钮获取 LaTeX 文件

表格处理示例

简单表格

| 列1 | 列2 | 列3 | |-----|-----|-----| | A | B | C | | 1 | 2 | 3 |

自动生成为 tabular 环境。

长文本表格

| 特性 | 详细说明 | |------|----------| | 智能处理 | 这是一段很长的文本,会自动触发换行处理,确保不会溢出页面边界 |

自动生成为 tabularx 环境,并计算合适的列宽。

配置选项

点击右上角"设置"按钮打开配置面板:

  • 文档类:根据文档类型选择(文章、报告、书籍)
  • 字体大小:选择合适的字体大小
  • 中文支持:自动检测中文并加载 ctex 宏包
  • 表格样式:专业样式(booktabs)或标准样式
  • 自动换行阈值:设置触发自动换行的字符数

🏗️ 技术架构

核心技术栈

  • 前端框架:React 18 + TypeScript
  • 构建工具:Vite
  • 编辑器:CodeMirror 6
  • Markdown 解析:markdown-it
  • 状态管理:Zustand

项目结构

src/ ├── components/ # React 组件 │ ├── MarkdownEditor.tsx │ ├── LatexPreview.tsx │ ├── Toolbar.tsx │ └── SettingsPanel.tsx ├── services/ # 核心服务 │ ├── latexRenderer.ts # LaTeX 渲染器 │ ├── tableProcessor.ts # 表格智能处理 │ ├── documentGenerator.ts # 文档生成器 │ └── exportService.ts # 导出服务 ├── stores/ # 状态管理 │ └── appStore.ts ├── types/ # TypeScript 类型 │ └── index.ts ├── utils/ # 工具函数 │ └── latexEscape.ts └── App.tsx # 主应用

核心算法

表格列宽计算

基于内容长度智能分配列宽 1. 计算每列最长内容的显示宽度(考虑中英文差异) 2. 按比例分配页面可用宽度 3. 应用最小/最大宽度约束 4. 转换为 LaTeX 宽度表达式

表格环境选择决策树

行数 > 30 → longtable(支持跨页) 存在长文本 + 列数 ≤ 5 → tabularx(自动分配列宽) 全是短文本 → tabular(简单高效)

🎨 设计原则

  1. 零依赖部署:纯前端实现,无需服务器
  2. 智能化:自动检测和优化,减少用户配置
  3. 性能优先:防抖、懒加载优化用户体验
  4. 专业输出:生成符合 LaTeX 规范的高质量代码

📝 示例

输入(Markdown)

# 论文标题 ## 摘要 这是一段**重要**的内容。 ## 数据对比 | 方法 | 准确率 | 速度 | |------|--------|------| | 方法A | 95.2% | 快 | | 方法B | 96.8% | 中等 | 数学公式:$E = mc^2$

输出(LaTeX)

\documentclass[11pt,a4paper]{article} \usepackage{geometry} \usepackage[UTF8]{ctex} \usepackage{booktabs} \geometry{ left=2.5cm, right=2.5cm, top=2.5cm, bottom=2.5cm } \begin{document} \section{论文标题} \subsection{摘要} 这是一段\textbf{重要}的内容。 \subsection{数据对比} \begin{tabular}{l c c} \toprule 方法 & 准确率 & 速度 \\ \midrule 方法A & 95.2\% & 快 \\ 方法B & 96.8\% & 中等 \\ \bottomrule \end{tabular} 数学公式:$E = mc^2$ \end{document}

🌐 部署指南

GitHub Pages 部署

本项目已配置自动化部署工作流,推送到 main 分支时自动部署到 GitHub Pages。

部署步骤:

  1. 在 GitHub 仓库设置中启用 GitHub Pages
  2. 选择 "GitHub Actions" 作为 Source
  3. 推送代码到 main 分支,自动触发部署

其他部署平台

Vercel

npm i -g vercel vercel

Netlify

npm i -g netlify-cli netlify deploy --prod

Cloudflare Pages

  • 连接 GitHub 仓库
  • 构建命令:npm run build
  • 输出目录:dist

🔧 开发

代码规范

  • TypeScript 严格模式
  • ESLint + Prettier
  • 组件化开发
  • 功能模块解耦

添加新功能

  1. services/ 目录添加服务逻辑
  2. components/ 目录添加 UI 组件
  3. 更新类型定义 types/index.ts
  4. 集成到主应用 App.tsx

开发者指导:重新编译 LaTeX 引擎

仅在需要修改或重新编译 LaTeX 引擎时使用

本项目使用 SwiftLaTeX 的 WebAssembly 引擎(已预编译),普通开发和使用无需以下步骤。

如果需要重新编译 XeTeX 或 PdfTeX 引擎:

  1. 安装 Emscripten SDK (emsdk)

    # 克隆 emsdk 仓库 git clone https://github.com/emscripten-core/emsdk.git cd emsdk # 安装最新版本 ./emsdk install latest # 激活环境 ./emsdk activate latest # 设置环境变量 source ./emsdk_env.sh
  2. 编译 LaTeX 引擎

    # 进入引擎源码目录 cd public/swiftlatex/SwiftLaTeX-20022022/pdftex.wasm # 或 cd public/swiftlatex/SwiftLaTeX-20022022/xetex.wasm # 编译 make
  3. 生成格式文件(可选)

    # 使用项目提供的脚本 ./scripts/generate-format.sh

注意

  • emsdk 目录体积较大(数百 MB),已从项目中移除
  • 普通开发者和用户无需安装 emsdk
  • 已编译的引擎文件位于 public/swiftlatex/ 目录
  • 只有需要修改 C/C++ 源码并重新编译时才需要 emsdk

📊 性能优化

  • Service Worker 缓存:缓存 SwiftLaTeX 引擎和字体文件
  • 代码分割:Vendor/Editor/Markdown 分包加载
  • 资源预加载:首次访问后离线可用
  • 编译进度反馈:实时显示编译阶段和进度

🌐 浏览器兼容性

浏览器最低版本支持状态
Chrome90+✅ 完全支持
Edge90+✅ 完全支持
Firefox88+✅ 完全支持
Safari14+⚠️ 部分支持

注意:

  • 需要 WebAssembly 支持
  • 推荐使用基于 Chromium 的浏览器获得最佳体验
  • Safari 可能存在内存限制,建议处理小型文档

📄 License

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request!

📮 联系

如有问题或建议,请通过 GitHub Issues 联系。