它能做什么?
告别 VS Code 自带预览器的单调渲染——Hummingbird MD 把你的 Markdown 文件变成一份排版精良、赏心悦目的阅读体验。
功能一览
代码高亮
基于 Shiki 的精确语法高亮,和 VS Code 编辑器使用同款 TextMate 语法引擎。亮色 / 暗色主题自动切换,代码块 hover 显示复制和全屏预览按钮。
文件 url 自动检测
渲染器会自动检测 path 特征,如果是项目可以直接跳转的代码文件,会高亮显示,单击即可跳转到对应文件的对应行
目录导航
侧边栏自动生成文档目录树。点击标题跳转定位,阅读时实时高亮当前位置。切换阅读 tab 时自动刷新目录并恢复高亮。长文档的好帮手。
Mermaid 图表
流程图、时序图、甘特图、类图……用 Mermaid 语法写的图表直接渲染出来,点击可全屏查看,支持缩放、平移、旋转和下载为 JPG。
图片查看器
点击任意图片进入全屏模式——放大、缩小、旋转、拖拽,前后切换同一文档中的所有图片。
md 表格全屏查看
表格右上角会有全屏按钮,点击后会将表格渲染为全屏视图,方便查看
15 款主题风格
不只是亮色和暗色——内置 Classic、GitHub、Vue、Minimal、Dracula、Solarized、Nord、Gruvbox、Catppuccin、Everforest、Rosé Pine、One Dark、Notion、Ayu、Flexoki 共 15 款配色方案,每款都有亮色和暗色版本。总有一款适合你的口味。
阅读样式定制
在侧边栏的设置面板中可以调整:
- 字体选择——自动检测当前操作系统,只显示已安装的系统字体(macOS 的苹方 / SF Mono,Windows 的微软雅黑 / Consolas 等),也支持手动输入自定义字体
- 字体大小、字重
- 行高、段落间距
所有设置自动保存,下次打开继续生效。
文档信息
侧边栏底部展示文档字数、字符数、段落数、文件大小、路径和日期信息,点击路径可一键复制。
怎么用?
有三种方式打开预览:
- 编辑器工具栏 — 打开
.md文件,点击右上角的蜂鸟图标 - 文件资源管理器 — 右键
.md文件,选择「Preview in Hummingbird MD」 - 命令面板 —
Ctrl/Cmd + Shift + P,输入Hummingbird MD
已打开的文档再次触发预览时会自动跳转到已有预览 tab,不会重复创建。源文件内容改动后预览会自动刷新并保持当前阅读位置。
技术栈
markdown-it + Shiki + Mermaid,基于 VS Code Webview 双面板架构(阅读器 + TOC 侧边栏),esbuild 三入口并行构建。
