Markdown to LaTeX 转换工具 📝

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

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

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

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

• 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 规范的高质量代码

# 论文标题

## 摘要

这是一段**重要**的内容。

## 数据对比

| 方法 | 准确率 | 速度 |
|------|--------|------|
| 方法A | 95.2% | 快 |
| 方法B | 96.8% | 中等 |

数学公式：$E = mc^2$

\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}

本项目已配置自动化部署工作流,推送到 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 引擎时使用

本项目使用 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 分包加载
• 资源预加载:首次访问后离线可用
• 编译进度反馈:实时显示编译阶段和进度

注意:

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

MIT License

欢迎提交 Issue 和 Pull Request！

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