tombumd · 同步马
what you see is what you edit, in sync both ways. 所见所得,编辑和预览光标双同步。 https://github.com/tombumd/tombumd
tombumd opens Markdown files as an editable live preview: type directly in the rendered page (formulas included).
When you want the source, click ✎ Edit source — VS Code's own editor opens beside it, and the two stay in sync:
content, and the caret in both directions (the synced caret is drawn in red).
tombumd 让 md 文件直接打开成可以编辑的预览(公式也能点进去改)。需要看源码时点顶栏 ✎ 编辑源码,VS Code 自带的编辑器在旁边打开,
两边内容实时同步,光标双向跟随(跟随过去的光标显示为红色)。
Features · 功能
|
English |
中文 |
| ⚡ |
Opens fast: Markdown opens straight into the preview; one bundled script, text shows before formulas finish typesetting |
打开快:md 直接打开成预览;脚本合并成一个文件,文字先出来,公式随后排版 |
| ✍️ |
Editable preview: click to place the caret, type, select, undo — all mapped back to the Markdown source |
可编辑的预览:单击定位、直接输入、选择、撤销,全部落到 md 源码上 |
| 🔁 |
Source in VS Code's own editor beside the preview, two-way caret sync, synced caret shown in red |
源码用 VS Code 自带的编辑器并排打开,光标双向同步,跟随过去的光标为红色 |
| ∑ |
LaTeX math (MathJax): click into a formula to edit it, formula palette (Ctrl+M), \ command completion, \label / \eqref / \tag numbering, equation / align environments |
LaTeX 公式(MathJax):点进公式直接改、mini 公式编辑器(Ctrl+M)、\ 命令补全、\label/\eqref/\tag 编号、equation/align 等环境 |
| 📊 |
Mermaid diagrams, syntax-highlighted code, tables (right-click to add/remove rows & columns), task lists, footnotes, anchors |
mermaid 流程图、代码高亮、表格(右键增删行列)、任务列表、脚注、锚点跳转 |
| 🎨 |
Font size, text color, highlight, underline (<span style>, <u>), heading numbering |
字号、文字颜色、涂色、下划线、标题序号 |
| 🖼 |
Paste a screenshot → saved next to the .md file, auto-compressed to WebP |
粘贴截图自动保存到 md 旁边,并自动压缩成 WebP |
| 📤 |
Export HTML (MathJax embedded, works offline), Word .docx (editable equations), PDF, PNG, LaTeX; copy as Markdown / Word / WeChat (公众号) |
导出 HTML(内嵌 MathJax,离线可看)、Word(可编辑公式)、PDF、PNG 长图、LaTeX;复制 MD / Word / 公众号 |
| 🗂 |
Open as many Markdown files as you like — each tombumd tab is independent |
可以同时打开任意多个 md,每个标签页互相独立 |
| 🔒 |
No network: every script is bundled; no external JS anywhere, including exported HTML |
完全离线:所有脚本随插件自带,界面和导出的 HTML 都不连任何外部 js |
Getting started · 开始使用
- Install the extension and open any
.md file — it opens in tombumd. 装好插件后打开任意 .md 文件,就是 tombumd 的预览。
- Click anywhere in the page and type. Save with
Ctrl+S as usual (or turn on VS Code Auto Save).
在页面里任意位置单击、直接输入;保存照常用 Ctrl+S(或打开 VS Code 自动保存)。
- Click ✎ Edit source on the toolbar (or the word count in the status bar) to open the Markdown source beside it.
The caret follows in both directions. 点顶栏 ✎ 编辑源码(或状态栏上的字数),在旁边打开 md 源码,光标双向跟随。
- From a plain text editor, click the tombumd icon in its top-right corner to open the preview beside it.
在普通文本编辑器里,点右上角的 tombumd 图标,在旁边打开 tombumd 预览。
- Prefer the text editor by default? Open With… → Configure default editor for '*.md' → Text Editor.
不想默认用 tombumd 打开:「打开方式…」→「为 '*.md' 配置默认编辑器」→ 选「文本编辑器」。
- Click ? in the toolbar for the full user guide (Chinese). 点顶栏的 ? 打开完整使用说明。
One row of icon buttons; hover any of them for a short Chinese + English tip. When the window is narrow, the
buttons at the end fold into ». Less-used commands live in the ▾ drop-down menus and the right-click menu.
顶栏只有一行图标按钮,鼠标悬停有中英文简短说明;窗口窄时排在后面的按钮自动收进「»」。不常用的功能在下拉菜单(▾)和右键菜单里。
| Group 分组 |
Buttons 按钮 |
| Format 格式 |
Bold 粗体 · Italic 斜体 · Underline 下划线 · Font size 字号 · Text color 文字颜色 · Highlight 涂色 |
| Insert 插入 |
Heading 标题 · Link 链接 · Anchor 锚点 · Image 图片 · Code 代码 · Quote 引用 · Lists 列表 · Table 表格 |
| Math 公式 |
Insert formula 插入公式 · Inline/display 行内/行间 · Show labels 显示 label · Heading numbers ▾ 标题序号 |
| Navigate 跳转 |
Go back 返回 (Alt+←) |
| Right 右侧 |
Copy ▾ 复制 (MD / Word / 公众号) · Export & more ▾ 导出与更多 · Outline 目录 · ✎ Edit source 编辑源码 · Settings 设置 · Guide 说明 |
Commands · 命令
All under tombumd in the Command Palette (Ctrl+Shift+P) · 命令面板里输入 tombumd:
| Command |
命令 |
tombumd: Open with tombumd / Open tombumd Preview to the Side |
用同步马打开 / 在旁边打开同步马预览 |
tombumd: Edit Source in VS Code Editor |
编辑源码(在旁边用 VS Code 编辑器打开) |
tombumd: Export HTML / PDF / PNG / Word / LaTeX |
导出 |
tombumd: Copy Markdown / Copy for Word / Copy for WeChat |
复制 MD / Word / 公众号 |
tombumd: Settings, tombumd: User Guide |
设置、使用说明 |
Settings · 设置
| Where 位置 |
Setting 设置 |
| VS Code settings |
tbmd.syncCursorWithTextEditor (default true): two-way caret sync with a VS Code editor showing the same file; the synced caret is red · 与同一文件的 VS Code 编辑器光标双向同步,跟随过去的光标为红色 |
| tombumd ⚙ dialog |
Image folder, base64 on copy, WebP compression & quality, export-HTML CSS, WeChat CSS · 图片保存位置、复制时转 base64、WebP 压缩与质量、导出 HTML 样式、公众号样式(对所有 tombumd 编辑器生效) |
How it works with VS Code · 与 VS Code 的分工
- tombumd is a custom text editor and the default editor for
*.md / *.markdown: the VS Code document is the single
source of truth. Saving, dirty state, Git (diffs still use the normal text diff), Timeline, Auto Save and file
management are all VS Code's. tombumd 是 md 的默认「自定义文本编辑器」,内容以 VS Code 的文档为准;保存、git(diff 仍是普通文本对比)、时间线、自动保存、文件管理都交给 VS Code。
- tombumd keeps only the preview; the source is edited in VS Code's own editor, so syntax highlighting, multi-cursor,
find/replace and other extensions all work there. tombumd 只保留预览区,源码在 VS Code 自带的编辑器里改,语法高亮、多光标、查找替换、其它插件都能用。
Ctrl+Z / Ctrl+Y inside tombumd use tombumd's own undo stack; in the text editor they use VS Code's. tombumd 里的撤销/重做用 tombumd 自己的撤销栈,文本编辑器里用 VS Code 的。
- Each tab is a separate webview, kept alive while hidden so switching tabs is instant; hidden tabs catch up with
outside edits when shown again. 每个标签页是独立的 webview,切换时保留状态;看不见时的外部修改在切回来时再同步。
Privacy & offline · 隐私与离线
tombumd loads only the files shipped inside the extension. It makes no network requests by itself; remote images you
reference in your Markdown are displayed as usual. tombumd 只加载插件自带的文件,自身不发任何网络请求;md 里引用的网络图片照常显示。
License · 协议
MIT © 2026 tombumd (https://github.com/tombumd) — see the LICENSE file.
Bundled third-party libraries (MathJax — Apache-2.0, highlight.js — BSD-3-Clause, mermaid / html2canvas / jsPDF — MIT)
keep their own licenses: see THIRD_PARTY_NOTICES.md and the licenses/ folder.
tombumd 本身采用 MIT 协议;随附的第三方库遵循各自的协议,详见 THIRD_PARTY_NOTICES.md 与 licenses/ 文件夹。
| |