中文用户请看这里 👉 跳转到中文版

Math Worksheet · Math Formulas → Images

Turn any math — from a simple fraction to advanced formulas (integrals, matrices, summations…) — into crisp, printable images and paste them into Word / WPS / Google Docs with one click. Anything you can express in LaTeX works; paired with an AI like Claude Code, even complex expressions come straight from a one-line description. Elementary fractions, mixed numbers, compare-the-size and mental-math are just common use cases. Only needs python3 + a browser — no LaTeX install.

This is a Claude Code Skill, and also works as a plain local web page.

✨ Demo · 一句话出图

1. Describe a formula in plain words — 用大白话描述一个公式：

2. Get a crisp, copy-paste-ready image — 一键得到清晰、可直接粘贴的图片：

Above: ask for Cauchy’s integral formula (higher-order derivative form) in everyday language, and it becomes a clean image ready for Word / WPS / lecture notes — one click to copy. 上图：用日常语言描述「柯西积分公式（高阶导数形式）」，立刻得到可贴进 Word / WPS / 讲义的清晰图片，点一下就复制。

---

What it solves

When making worksheets/exams, fractions need the standard “numerator — bar — denominator” layout. Screenshots are blurry and hand-typing is slow. This tool launches a local live-preview page: you write LaTeX (one formula per line), it renders instantly, and every problem has Copy PNG / Copy SVG / Download SVG buttons — one click to drop it into your document.

You (or an AI) write:  \dfrac{16}{7}=\underline{\hspace{1.5cm}}+\dfrac{\hspace{1.2cm}}{\hspace{1.2cm}}
The page shows:        16/7 = ____ + ▢/▢      ← standard fraction layout, click "Copy PNG"

Features

• 🧮 Standard fraction layout — numerator/bar/denominator, mixed numbers, blank fractions, compare circle, roots, units
• ⚡ Live preview — edit the formulas file, the page refreshes within ~1s, no manual reload
• 📋 One-click copy — 4× high-res PNG straight to the clipboard; SVG vector copy or download
• 🌍 Bilingual UI — auto-detects browser language (English / 中文), with a manual toggle
• 🔌 Zero LaTeX dependency — rendering uses a bundled offline MathJax; just python3 for a static server
• 🌐 Works offline — MathJax is vendored in the repo
• 🤖 AI-friendly — as a Claude Code Skill, just dictate problems and the AI renders them
• 🙋 Standalone too — open the page, type LaTeX yourself, click Render

Requirements

• python3 (only its built-in http.server)
• A modern browser, Chrome / Edge / Arc recommended (most reliable clipboard; Firefox has weak ClipboardItem support)
• macOS / Linux (start.sh opens the browser via open or xdg-open)

Install

As a Claude Code Skill

git clone https://github.com/caoxg/math-worksheet.git ~/.claude/skills/math-worksheet

Then in Claude Code just say “make these into images” / “render these fraction problems” and the AI launches it automatically.

As a standalone tool (no AI)

git clone https://github.com/caoxg/math-worksheet.git
cd math-worksheet
bash scripts/start.sh        # start server + open browser

In the browser, type LaTeX in the left box (one per line) → click Render → click Copy PNG on each card.

Usage

Start / stop

bash scripts/start.sh          # default port 8765; idempotent (reuses if already running)
bash scripts/start.sh 8770     # custom port
bash scripts/stop.sh           # stop (optional port arg)

On start it prints the run dir and the formulas file path:

RUN_DIR=~/.local/share/math-worksheet
FORMULAS=~/.local/share/math-worksheet/formulas.txt   ← write problems here
URL=http://localhost:8765/index.html

Write problems

Write LaTeX into formulas.txt, one per line — the page auto-updates. Let an AI write it, or do it yourself:

\dfrac{1}{6}+\dfrac{3}{6}=\underline{\hspace{2cm}}
\dfrac{16}{7}=\underline{\hspace{1.5cm}}+\dfrac{\hspace{1.2cm}}{\hspace{1.2cm}}
\dfrac{3}{8}\;\bigcirc\;\dfrac{5}{8}

Copy into your document

Button	What it does
Copy PNG	Renders a 4× high-res PNG to the clipboard; Ctrl/Cmd+V into Word/WPS. Most reliable
Copy SVG	Tries to put vector SVG on the clipboard; if the browser blocks it, falls back to copying the source
Download SVG	Saves a .svg; insert it as a picture for true vector (modern WPS/Word)
White / Transparent	Transparent mode copies a transparent-background PNG (no white box on colored cells)
Font size	Larger = crisper copies

LaTeX cheatsheet

Rules: ① no $ around formulas (auto-wrapped); ② no CJK inside formulas (math fonts lack CJK glyphs); ③ one per line.

Need	Syntax
Fraction	\dfrac{a}{b}
Answer blank	\underline{\hspace{2cm}} (tune the cm)
Blank fraction (fill num/den)	\dfrac{\hspace{1.2cm}}{\hspace{1.2cm}}
Mixed-number blank	\underline{\hspace{1.5cm}}+\dfrac{\hspace{1.2cm}}{\hspace{1.2cm}}
Compare blank (fill > < =)	\dfrac{3}{8}\;\bigcirc\;\dfrac{5}{8}
Operators	+ - \times \div =
Root / power	\sqrt{...} x^{2}
Parentheses (auto-size)	\left( ... \right)
Units (upright) + thin space	50\,\text{m}\times 30\,\text{m}
Division as a fraction bar	\dfrac{\,dividend\,}{\,divisor\,}

How it works

formulas.txt ──(poll every 1s)──► index.html ──(MathJax)──► SVG ──(canvas)──► copy PNG/SVG
     ▲                                ▲
     │ you/AI write                   │ served by python3 -m http.server
     └────────────────────────────────┘

• scripts/start.sh — copies assets/ to a writable run dir, starts python3 -m http.server in the background, opens the browser.
• assets/render.html — MathJax rendering + 1s polling of formulas.txt + copy/download buttons + bilingual UI.
• assets/tex-mml-svg.js — vendored offline MathJax (~2MB); start.sh re-fetches it once if missing.

Project layout

math-worksheet/
├── SKILL.md              # Claude Code Skill definition (triggers + conventions)
├── README.md
├── assets/
│   ├── render.html       # live-preview page (bilingual)
│   └── tex-mml-svg.js    # offline MathJax (vendored)
└── scripts/
    ├── start.sh          # start (idempotent)
    └── stop.sh           # stop

FAQ

• Copy PNG does nothing? Use Chrome/Edge/Arc; the clipboard API needs a secure context, which http://localhost satisfies. Firefox may fail.
• Port in use? bash scripts/start.sh 8770 to pick another port.
• Formulas show as boxes? Don’t put CJK inside formulas; MathJax math fonts have no CJK glyphs — put text labels outside the formula.
• Offline? Yes. MathJax is bundled; if missing it’s fetched once, then fully offline.

License

Code is MIT. The bundled assets/tex-mml-svg.js is MathJax, licensed Apache-2.0, © The MathJax Consortium — redistributed here only for offline convenience.

---

---

数学公式转图片（中文版） · Math Worksheet

把数学题秒变清晰可打印的图片，一键复制进 Word / WPS / Google Docs。 从一个简单分数到复杂公式（积分、矩阵、求和……），凡是 LaTeX 能写的都行； 配合 Claude Code 这样的 AI，再复杂的数学式也能由一句话生成。 小学分数、带分数、比大小、巧算只是其中几类常见用法。 只需 python3 + 浏览器，无需安装 LaTeX。

这是一个 Claude Code Skill，也能当普通本地网页独立使用。

⬆ Back to English / 回到英文版

它解决什么问题

出试卷/练习卷时，分数要排成「分子 — 横线 — 分母」这种标准格式，截图又糊、手敲又慢。 本工具启动一个本地实时预览页面：你写 LaTeX（一行一题），页面秒级渲染，每道题下面有 复制PNG / 复制SVG / 下载SVG 按钮，点一下就能贴进文档。

你（或 AI）写：  \dfrac{16}{7}=\underline{\hspace{1.5cm}}+\dfrac{\hspace{1.2cm}}{\hspace{1.2cm}}
页面显示：       16/7 = ____ + ▢/▢      ← 标准分数排版，点“复制PNG”贴进 WPS

特性

• 🧮 标准分数排版：分子/横线/分母，带分数、空白分数、比大小圈、根号、单位一应俱全
• ⚡ 实时预览：改公式文件，页面 1 秒自动刷新，无需手动重载
• 📋 一键复制：4× 高清 PNG 直接进剪贴板；SVG 矢量可复制或下载
• 🌍 双语界面：按浏览器语言自动判定中/英，另带手动切换按钮
• 🔌 零 LaTeX 依赖：渲染用打包好的离线 MathJax，只要 python3 起个静态服务器
• 🌐 离线可用：MathJax 已随仓库打包
• 🤖 AI 友好：作为 Claude Code Skill，直接对 AI 口述题目即可自动出图
• 🙋 也能独立用：打开网页，自己敲 LaTeX，点渲染

环境要求

• python3（仅用其内置 http.server）
• 现代浏览器，推荐 Chrome / Edge / Arc（剪贴板复制最稳；Firefox 对 ClipboardItem 支持较弱）
• macOS / Linux（start.sh 用 open 或 xdg-open 打开浏览器）

安装

作为 Claude Code Skill

git clone https://github.com/caoxg/math-worksheet.git ~/.claude/skills/math-worksheet

之后在 Claude Code 里直接说「出几道分数题做成图片」或「把这些题渲染成图」，AI 会自动启动并出图。

当普通工具用（不依赖 AI）

git clone https://github.com/caoxg/math-worksheet.git
cd math-worksheet
bash scripts/start.sh        # 起服务器 + 开浏览器

浏览器打开后，在左侧文本框敲 LaTeX（一行一题）→ 点「渲染」→ 每题点「复制PNG」。

使用

启动 / 停止

bash scripts/start.sh          # 默认端口 8765，幂等：已运行则复用
bash scripts/start.sh 8770     # 换端口
bash scripts/stop.sh           # 停止（可带端口号）

启动后会打印运行目录与公式文件路径：

RUN_DIR=~/.local/share/math-worksheet
FORMULAS=~/.local/share/math-worksheet/formulas.txt   ← 写题目的文件
URL=http://localhost:8765/index.html

出题

把 LaTeX 写进 formulas.txt，一行一题，页面自动更新。让 AI 写、或自己写都行：

\dfrac{1}{6}+\dfrac{3}{6}=\underline{\hspace{2cm}}
\dfrac{16}{7}=\underline{\hspace{1.5cm}}+\dfrac{\hspace{1.2cm}}{\hspace{1.2cm}}
\dfrac{3}{8}\;\bigcirc\;\dfrac{5}{8}

复制到文档

按钮	作用
复制PNG	渲染成 4× 高清 PNG 写入剪贴板，到 Word/WPS Ctrl/Cmd+V 直接贴图。最稳
复制SVG	尝试把矢量 SVG 放进剪贴板；浏览器多半不允许，会自动退回复制源码文本
下载SVG	存成 .svg 文件，再「插入→图片」可得真正矢量（新版 WPS/Word 支持）
白底/透明	透明模式下复制出的 PNG 是透明底，贴进彩色单元格不带白框
字号	调大让复制出的图更清晰

LaTeX 写法速查

规则：① 公式外不要加 $（页面自动包裹）；② 公式里不要写中文（数学字体无中文字形）；③ 一行一题。

需求	写法
分数	\dfrac{a}{b}
答案填空线	\underline{\hspace{2cm}}（改 cm 调长短）
空白分数（填分子分母）	\dfrac{\hspace{1.2cm}}{\hspace{1.2cm}}
带分数填空	\underline{\hspace{1.5cm}}+\dfrac{\hspace{1.2cm}}{\hspace{1.2cm}}
比大小填空（填 > < =）	\dfrac{3}{8}\;\bigcirc\;\dfrac{5}{8}
运算符	+ - \times \div =
根号 / 乘方	\sqrt{...} x^{2}
括号（自动适配高度）	\left( ... \right)
单位（正体）+ 细空格	50\,\text{m}\times 30\,\text{m}
除法用分数线	\dfrac{\,被除式\,}{\,除式\,}

工作原理

formulas.txt ──(每秒轮询 fetch)──► index.html ──(MathJax)──► SVG ──(canvas)──► 复制 PNG/SVG
     ▲                                ▲
     │ 你/AI 写入                       │ python3 -m http.server 提供
     └────────────────────────────────┘

• scripts/start.sh：把 assets/ 拷到可写运行目录，后台启动 python3 -m http.server，打开浏览器。
• assets/render.html：MathJax 渲染 + 每秒轮询 formulas.txt + 复制/下载按钮 + 双语界面。
• assets/tex-mml-svg.js：随仓库打包的离线 MathJax（约 2MB）；缺失时 start.sh 会联网补下一次。

目录结构

math-worksheet/
├── SKILL.md              # Claude Code Skill 定义（触发条件 + 约定）
├── README.md
├── assets/
│   ├── render.html       # 实时预览页面（双语）
│   └── tex-mml-svg.js    # 离线 MathJax（vendored）
└── scripts/
    ├── start.sh          # 启动（幂等）
    └── stop.sh           # 停止

常见问题

• 复制 PNG 没反应？ 用 Chrome/Edge/Arc；剪贴板 API 需要安全上下文，本工具用 http://localhost 已满足。Firefox 可能失败。
• 端口被占用？ bash scripts/start.sh 8770 换一个端口。
• 公式显示成方块？ 公式里别写中文；MathJax 数学字体不含中文字形，中文放题面文字里。
• 离线能用吗？ 能。MathJax 已打包；首次若缺失会联网补下，之后纯离线。

许可

本项目代码采用 MIT 协议。打包的 assets/tex-mml-svg.js 来自 MathJax， 采用 Apache-2.0 协议，版权归 The MathJax Consortium 所有，随本仓库再分发仅为方便离线使用。

⬆ 回到顶部