VSCode 默认不渲染 Markdown 中的 Emoji 短代码(如 :smile:),因其内置预览器基于禁用扩展的 markdown-it,仅支持 Unicode 表情;需装 Markdown All in One 启用补全,再用 Markdown Preview Enhanced 替换预览引擎以实现 GitHub 风格实时渲染。

VSCode 默认不支持 Markdown 文件中直接输入 Emoji 短代码(如 :smile:)并自动转换为图形,也不原生预览渲染后的 Emoji——但可以通过轻量配置实现接近 GitHub 风格的输入与实时预览。
为什么 :smile: 在 VSCode 的 Markdown 预览里不显示成表情?
VSCode 内置的 Markdown 预览器基于 markdown-it,但默认禁用所有扩展插件(包括 Emoji 支持),且不解析 GitHub 风格的短代码语法。它只渲染标准 HTML 实体(如 😀)或 Unicode 表情字符(如 ?),对 :xxx: 形式完全忽略。
常见错误现象:
– 输入 :heart: 后预览区原样显示文字,而非 ❤️
– 安装了某些“Markdown Emoji”插件却没生效——因为它们只改编辑器补全,不改预览器行为
启用 Emoji 短代码输入:安装 Markdown All in One + 配置补全
该插件提供最稳定的 Emoji 补全,且不干扰其他功能:
- 在扩展市场搜索并安装
Markdown All in One(作者:Yu Zhang) - 打开设置(
Ctrl+,或Cmd+,),搜索markdown.extension.emoji.shortcut - 勾选该项,即可在 Markdown 文件中输入
:触发 Emoji 补全列表 - 补全后插入的是纯短代码(如
:rocket:),不是 Unicode 字符——这点很重要,保证源文件可读、跨平台兼容
让预览区真正显示 Emoji:用 markdown-it-emoji 替换内置解析器
必须通过自定义 Markdown 预览引擎实现,VSCode 不允许直接修改内置解析器,但支持外部扩展接管:
- 安装扩展
Markdown Preview Enhanced(作者:Shd101wyy)——它是目前唯一稳定集成markdown-it-emoji的预览方案 - 安装后,右键 Markdown 文件 → 选择
Open Preview to the Side (Enhanced),或快捷键Ctrl+K V - 此时
:tada:、:see_no_evil:等全部短代码会实时转为图形,且支持 GitHub、GitLab、Twemoji 多种图标集(可在其设置中切换markdown-preview-enhanced.emoji) - 注意:不要同时启用 VSCode 原生预览和 Enhanced 预览,否则样式冲突;建议禁用原生预览(设置中搜
markdown.preview.enabled设为false)
不想装额外扩展?用 Unicode 表情字符“硬编码”最可靠
如果仅需少量 Emoji,且追求零依赖、100% 兼容,直接粘贴 Unicode 字符是最稳妥的方式:
- 去 Emojipedia 查找需要的表情,复制其 Unicode 版本(如 ? 对应 U+1F40D)
- 在 VSCode 中直接
Ctrl+V粘贴(无需任何插件),保存后所有环境(GitHub、Typora、Obsidian)都能正确显示 - 缺点:无法用键盘快速输入,且长文档中混入大量 Unicode 可能影响 Git diff 可读性(不过实际影响极小)
- 小技巧:Windows 可按
Win+.调出系统表情面板;macOS 按Ctrl+Cmd+Space,选中即插入
真正容易被忽略的是:Emoji 渲染效果高度依赖目标平台。你在 VSCode 里预览得再漂亮,发到 Slack 或 Notion 里可能又变回文字——因为它们各自解析规则不同。所以别过度优化本地预览,优先确保源码用的是标准短代码或标准 Unicode,其余交给发布端处理。


















