VScode 扩展 | 在注释中渲染 Markdown 和 LaTeX

· · 科技·工程

Markdown and LaTeX in Comments

主要我习惯在注释里打 \LaTeX 然后一整一大坨式子还没法渲染十分难受，然后就突发奇想做了个扩展。

第一次做 VScode 扩展，弄得不太好还请见谅。

简介

这个 VScode 插件可以在代码注释中渲染 Markdown 和 \LaTeX，支持部分 Markdown 语法和多行公式。

目前支持 C++、C、C#、Python、Java、Rust、Go、JS、PHP、TS、Kotlin、Swift 等编程语言，可以在设置中调整对每种语言是否启用。

由 Gemini-3.6-flash 辅助编写，目前 Bug 比较多，正在持续开发中。

这个插件不是 Markdown 编辑器，它的目的是营造更美观的注释，而不是把注释变成 Markdown 编辑器。

插件会自动识别当前主题注释颜色，如识别有误，可在设置中搜索 md-in-comment.mathColor 手动更改。

可以直接在 VScode 扩展中搜索“md-in-comment”来安装，或者到 VS marketplace 或 Github 下载。

:::info[示例]

您可以在安装扩展后将以下代码保存为 .cpp 文件中以查看渲染效果。

#include <iostream>

/*
# 多行注释大标题

这是一个包含 **粗体**、*斜体* 以及 ~~删除线~~ 的多行 Markdown 注释。

> 这是一段引用

下面是分割线

---

- 项目列表 1：支持 `int x = 100;` 内联代码
- 项目列表 2：支持行内公式 $n^2$

1. 即时预览
2. 支持多行公式

$$
\begin{aligned}
f(x) &= \int_0^x A^* (t) dt \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t}
\end{aligned}
$$
*/

void demoBlockComment()
{
    // # 单行注释大标题
    // > 单行引用
    // ~~删除线文本~~ 和 *斜体文本*
}

int main()
{
    return 0;
}

:::

实现原理

VScode 本身架构基于 Electron + Web 技术，官方定义是使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用。
实际上，你可以试试打开 VScode 的「帮助」选项，在里面找到「切换开发人员工具」，之后就可以看到整个应用的 DOM 树。如果你会一点 HTML，大概就对它非常熟悉。只要在任意一个网页里右键打开「检查」就可以看到网页的 DOM 树了，和 VScode 的非常相似。

VScode 这样的架构的好处就是可扩展性极高，第三方编写的扩展可以非常容易地调用官方 API 和操作 DOM 元素。

在这个扩展中，代码完全由 JS 编写。扩展会在打开受支持的语言的编辑器时被激活，并检测出代码中所有的注释段，对于每一段递归进行渲染。

中途我遇到一个非常大的问题：因为我在尝试支持 \LaTeX，就用 MathJax 把公式转换成了 SVG，然而单行公式无论怎样都不能很好地显示，要么把行高撑开了，要么导致显示错位。最后采取的方案是把 SVG 缩放到刚好可以放进一行，但代价就是比较高的公式显示效果很差。

然后，然后，我力竭了表格我真不想弄了。

后续会随机更新新语法或优化。