LiveWriteMD

在 VS Code 里边写边渲染的所见即所得 Markdown 编辑器。

实时预览 · 三种模式 · 标题 / 列表折叠 · Mermaid 图表 · KaTeX 公式 · 可视化表格 · PDF/HTML 导出 · 完整中文输入法支持

LiveWriteMD 把「实时预览（Live Preview）」搬进了 VS Code：你写下的 Markdown 标记语法在光标离开的瞬间渲染成最终样式，想修改时点回去又是源码——不需要在 「编辑器」和「预览页」两个标签之间来回切换。.md 文件默认直接用 LiveWriteMD 打开。

✨ 核心亮点

• 真·所见即所得：标记符号实时淡入淡出，排版结果就是最终文档的样子；点击任意一行即可就地编辑源码，双击还能把源码行「钉」住。
• 三种模式自由切换：实时预览 / 源码 / 阅读，可设默认模式，也能记住每个文件上次用的模式。
• 丰富的块级渲染：表格、Mermaid、KaTeX、脚注、任务列表、折叠块、YAML Frontmatter 全部直接渲染。
• 完整中文输入法（IME）支持：拼音组词期间不会误触发装饰、不会宽度跳变，中文写作体验与英文一致。
• 应用内设置面板：几十个颜色、字号、排版选项实时预览，无需手写 settings.json。
• 一键导出 PDF / HTML：导出的 HTML 样式自包含，PDF 走无头浏览器，排版与编辑器内一致。

📑 三种编辑模式

点击编辑器标题栏的模式按钮即可切换（可在设置里选择「单按钮循环」或「直达按钮」样式）， 也可以用命令面板或正文右键菜单切换。

🧩 功能一览

实时渲染的 Markdown 元素

• 标题 H1–H6：颜色与字号倍率均可单独定制
• 行内格式：加粗、斜体（可选真斜体字形）、删除线、行内代码
• 链接：[文字](https://github.com/lyjy-kq/livewrite-md-forvscode/blob/HEAD/地址)、裸 URL、空链、本地文件路径
• 引用块与分隔线
• 有序 / 无序列表：续行悬挂缩进对齐内容列；彩虹缩进色带——每级缩进一种颜色（红橙黄绿青蓝紫循环），有序 / 无序 / 任务列表规则完全统一
  • 连按任意次 Tab 跳过层级（如直接缩进两级）也能正常渲染，缺失层级自动以网格色带补齐，不会出现空白行
• 任务列表：渲染成复选框，直接点击即可勾选，源码同步更新
• 表格：可视化渲染，表头底色、斑马纹、选中格子高亮；右键菜单可直接增删行列
• 代码块：数十种编程语言语法高亮，右上角一键复制
• 数学公式：行内与块级 KaTeX 实时渲染
• Mermaid 图表：流程图、时序图等直接出图
• 脚注引用 / 定义、<details> 折叠块、YAML Frontmatter 折叠显示
• 图片：自动居中、宽度可按比例调整

大纲与折叠

• 右侧大纲面板：层级展示全部标题，点击跳转、随光标自动定位
• 大纲宽度可拖拽调节并持久化保存，支持缩进引导线、打开文件时自动展开
• 悬停行号显示折叠箭头：标题按章节、列表按子项一键收起 / 展开
  • 点击后立即同步刷新，无需移动鼠标或改变焦点
  • 支持连续折叠多个标题 / 列表项，相邻同级项不错位
  • 折叠行左缘显示与箭头同色的「角花」标识，一眼辨认收拢状态
  • 折叠只隐藏内容，正文仍可照常点击编辑

图片处理

• Ctrl+Shift+I 插入图片文件
• 粘贴 / 拖拽图片自动保存到文档旁的 assets 目录（目录名可配置）并插入链接
• 右键菜单可下载文档中的远程图片到本地

导出

• Export as HTML：生成样式自包含的 HTML 文件，可直接分享
• Export as PDF：通过无头 Edge/Chrome 打印，排版所见即所得（浏览器路径可配置）

编辑体验细节

• 完整 IME 支持：中文组词、候选窗状态处理正确，不打断输入
• 粘贴裸 URL 自动包裹成 Markdown 链接
• 括号 / 引号自动配对
• 当前行高亮、空白字符显形
• Ctrl + 滚轮调整正文字号并自动保存
• 大文件打开前警告（阈值可设，0 关闭）
• 正文右键菜单：模式切换、插入图片、导出、表格增删行列、下载远程图片

⌨️ 快捷键

更多命令在 Ctrl+Shift+P 命令面板中输入 LiveWriteMD 即可找到：

• LiveWriteMD: Live Preview Mode / Viewer Mode / Source Mode
• LiveWriteMD: Export as HTML / Export as PDF
• LiveWriteMD: 显示/隐藏大纲
• LiveWriteMD: 设置
• LiveWriteMD: Insert Image
• Open with LiveWriteMD（资源管理器右键 .md 文件）

⚙️ 设置与个性化

点击编辑器标题栏的齿轮图标打开应用内设置面板（或执行命令 LiveWriteMD: 设置）， 所有改动实时生效、自动保存。设置按分组组织：

• 通用：默认模式、模式切换样式、记住每个文件的模式、智能 URL 粘贴
• 编辑器：行号、自动换行、正文最大宽度（可读行宽）、字号缩放、当前行高亮、空白字符
• 标题与文字：H1–H6 颜色、H1 字号、加粗 / 斜体 / 删除线颜色、斜体真倾斜
• 代码：行内代码颜色底色与字号、代码块底色与边线
• 链接与引用：链接、引用竖线与文字、分隔线颜色
• 表格：边框、表头、斑马纹、选中格子颜色
• 列表与复选框：列表圆点、复选框强调色
• 大纲：自动展开、默认宽度、缩进引导线
• 图片与媒体：图片保存目录、媒体默认宽度、居中对齐
• 高级：明暗主题、同步防抖、拖拽判定、双击钉住、大文件阈值、PDF 浏览器路径、调试日志

所有颜色项留空即「自动」——跟随 VS Code 当前明暗主题；选择颜色后才覆盖，可随时改回。

🚀 快速开始

1. 安装扩展。
2. 打开任意 .md 文件，即默认以实时预览模式打开。
3. 直接开始写作；点标题栏齿轮调整外观，或用右侧大纲浏览长文档。

📦 安装

• VS Code Marketplace：在扩展面板搜索 LiveWriteMD 安装。
• 从 VSIX 安装：
  1. Ctrl+Shift+P → Extensions: Install from VSIX...
  2. 选择下载的 livewrite-md<版本>.vsix
  3. 执行 Developer: Reload Window 重载窗口

🛠️ 开发

npm install        # 安装依赖
npm run build      # 打包扩展宿主与 webview
npm run watch      # watch 模式持续构建
npm run package:vsix  # 生成固定文件名的安装包 livewrite-md<版本>.vsix

🔗 仓库与反馈

• GitHub: lyjy-kq/livewrite-md-forvscode
• 问题与建议：提交 Issue

🙏 致谢

项目的实时预览交互灵感来自 Obsidian，在此致谢。