VSCode Yarkdown

一款基于 TipTap 的现代化 Markdown 编辑器

✨ 特性概览

Yarkdown 是一款专为 VSCode 设计的 Markdown 编辑器，基于强大的 TipTap 和 ProseMirror 技术栈，提供类似 Typora 的即时渲染体验。

🎯 核心功能

🖼️ 智能图片处理
- Ctrl+V 直接粘贴图片并自动保存到本地
- Ctrl+Alt+V 在编辑器中粘贴图片（支持 Markdown 文档）
- 支持本地文件系统和七牛云存储
- 自动生成图片名称（时间戳或随机）
- 智能路径编码处理
📝 所见即所得编辑
- 基于 TipTap/ProseMirror 的富文本编辑
- 实时 Markdown 渲染，无需切换预览
- 支持斜杠命令快速插入内容
- 智能表格编辑和任务列表
🎨 主题与界面
- 自动主题切换（跟随 VSCode 主题）
- GitHub Light/Dark 主题
- 可配置的目录大纲（TOC）
- 可选的顶部菜单栏
🔧 高级功能
- 数学公式支持（KaTeX）
- Mermaid 流程图
- 代码高亮（基于 highlight.js）
- 表情符号支持
- 音频/视频嵌入
- 自定义容器语法

📋 支持的 Markdown 语法

功能	语法	说明
标记文本	`==高亮==`	文本高亮标记
上标	`x^2^`	数学上标
下标	`H~2~O`	化学下标
任务列表	`- [x] 完成的任务`	交互式任务列表
数学公式	$E=mc^2$	行内和块级公式
流程图	`mermaid`	Mermaid 图表
摘要折叠	`:::details{summary="标题"}`	可折叠内容块

🚀 快速开始

安装

在 VSCode 扩展市场搜索 "yarkdown"
点击安装
重启 VSCode

基本使用

打开 Markdown 文件：点击编辑器标题栏的 Yarkdown 图标
粘贴图片：直接 Ctrl+V 粘贴剪贴板中的图片
斜杠命令：输入 / 快速插入各种内容块
表情符号：输入 : 触发表情选择器

⚙️ 配置选项

默认打开方式

如果希望 Markdown 文件默认使用 Yarkdown 打开：

{
  "yarkdown.openMode": "yarkdown_beside",
  "workbench.editorAssociations": {
    "*.md": "vscode-yarkdown.yarkdown"
  }
}

换行符设置

为确保 Markdown 文件使用 LF 换行符：

{
  "files.eol": "\n"
}

图片存储配置

本地存储

{
  "yarkdown.storage": "filesystem",
  "yarkdown.imgSavePath": "./assets",
  "yarkdown.generateName": true,
  "yarkdown.newImageNameFormat": "time"
}

七牛云存储

{
  "yarkdown.storage": "qiniu",
  "yarkdown.qiniu.domain": "your-domain.com",
  "yarkdown.qiniu.accessKey": "your-access-key",
  "yarkdown.qiniu.secretKey": "your-secret-key",
  "yarkdown.qiniu.bucket": "your-bucket",
  "yarkdown.qiniu.zone": "Zone_z2"
}

界面定制

{
  "yarkdown.theme": "auto",
  "yarkdown.menu": true,
  "yarkdown.tocShow": false,
  "yarkdown.tocPos": "right",
  "yarkdown.showSlashTooltip": true
}

🎯 高级用法

自定义规则

可以配置文本转换规则，在粘贴内容转换为 Markdown 前应用：

{
  "yarkdown.rules": [
    {
      "regex": "特定模式",
      "options": "ig",
      "replace": "替换内容"
    }
  ]
}

路径编码

处理包含空格或中文的图片路径：

{
  "yarkdown.encodePath": "encodeSpaceOnly"  // none | encodeURI | encodeSpaceOnly
}

开发调试

启用 ProseMirror 开发工具：

{
  "yarkdown.debug": true
}

⌨️ 快捷键

快捷键	功能	说明
`Ctrl+V`	粘贴图片	在 Yarkdown 编辑器中
`Ctrl+Alt+V`	粘贴图片	在 Markdown 文档中
`Ctrl+H`	查找替换	文本查找和替换
`/`	斜杠命令	快速插入内容块
`:`	表情符号	触发表情选择器
`--Enter`	Frontmatter	插入文档头部信息

🔧 故障排除

常见问题

图片无法显示
- 检查图片路径是否正确
- 确认 yarkdown.encodePath 设置
- 验证 CDN 配置（如果使用）
七牛云上传失败
- 检查 AccessKey 和 SecretKey
- 确认 Bucket 名称和区域设置
- 验证网络连接
主题显示异常
- 尝试切换主题设置
- 重启 VSCode
- 检查是否有冲突的扩展

🤝 贡献

欢迎提交 Issue 和 Pull Request！

🙏 致谢

TipTap - 强大的富文本编辑器框架
ProseMirror - 底层编辑器引擎
Mermaid - 图表和流程图支持
KaTeX - 数学公式渲染

如果这个项目对你有帮助，请给个 ⭐️ 支持一下！

vscode-yarkdown

zhepama