再见了,所有的 VS Code 预览窗

这篇文章是关于我的 VS Code Extension. 同时 Github repo.

我们可能已经习惯了......

在 VS Code 的左边写 Markdown,眼睛再跳到右边检查渲染效果。它还总是对不齐!

让人烦躁的数学符号。写篇数学、物理的文章,每段都要嵌入公式。\mathcal{L} 的拉格朗日量,\boldsymbol{\theta} 的参数向量,\partial 的偏微分。每一个都要完整打出。你试过记忆快捷键,或开另一个文件存常用片段,甚至直接翻到很上面去复制粘贴一个公式再改。

每多一个 LaTeX 公式,就多一份负担。明明两三句话的事情,你的鼠标和眼球已经做了四五次往返。

你是否问过自己:为什么我就想打个字,还时不时需要放开键盘、去找鼠标、在文本中翻来翻去?这些操作都在打断我连贯的思考!

你说:那就换个工具,市面上有那么多Markdown编译器,有些还有很高级的功能。

但是啊,朋友,VS Code不就是文本编辑器吗?我凭什么不能在文本编辑器里编辑文本啊!

奖池还在叠加......

如果你也喜欢用MyST,那么我恭喜你。你 {code-cell} 的 Python 代码是真的能跑的,你的读者可以看到你输出的漂亮结果。

那你呢?你自己看得到吗?你在输入看到的只有Markdown。你要么信任自己的代码无比正确,要么偷偷在别处建个py跑一次。

你说:为什么不直接用 Jupyter Notebook?天然融合代码和Markdown输出。

但你打开过一个 .ipynb 的 git diff 吗?那是一整个 JSON 结构嵌套了 base64 编码的输出 blob,两行代码的改动能产生一堆 diff。合并冲突?我祝你好运。

而且它重!

你只是想写一篇文章,为啥要遭这么多罪?从来如此,便对吗?


问题其实不是四个,是一个

这四个痛点看起来很分散 -- 分屏、公式、代码输出、格式重量。 但它们指向同一个根源。 我们把"写"和"看"拆开了。 那为什么不做到 所写即所见,所见即所得! 你在键盘上敲下的每一个字,在你焦点离开的那一刻,原地变成它最终的样子。没有第二个窗格,没有构建步骤,没有 JSON 包裹。你的 .md 文件还是 .md 文件 -- 它就是它自己的 notebook。 我一直想要这个东西,我没找到,这一度甚至让我自己的写作热情下降。 于是,我就做了一个!

所以有了 MyST Notebook

MyST Notebook 是一个 VS Code 扩展。它做的事情很简单:在 VS Code 中把 .md 文件变成 notebook 编辑器里的原生体验。 核心洞察只有一句话:VS Code 从 1.85 开始,notebook editor API 已经成熟到可以支持自定义 notebook 类型。不需要发明新编辑器,不需要 Electron 套壳 -- 你已经在用的编辑器,就是最好的宿主。 逐个回顾那些痛点:

预览窗格 → 内联渲染

在 MyST Notebook 里,没有"预览"这个概念。你写一段正文,写完按 Enter 跳到下一个单元格,刚才那段就原地渲染了。标题、加粗、链接、列表、引用块 -- 全部实时可见。 眼球不再左右跳。屏幕不再切成两半。你看到的东西就是读者最终看到的东西。

一个诚实的注: MyST 的冒号围栏指令(:::{note}:::{warning} 等)目前还不能在编辑器里内联渲染------这是 VS Code notebook 渲染器 md.renderInline() 的架构限制,跳不过去。编辑时它们显示为纯文本,jupyter book build 会正确处理最终输出。这是 v0.1 版本最让我在意的一个妥协,后续版本我会持续探索解决方案,如果有小伙伴有好的建议,也可以随时联系我。

LaTeX 地狱 → 数学面板 + 自动补全

使用 Ctrl+Shift+M 打开数学符号面板 -- 最近使用过的符号排在前面,一键插入。\mathbb{E}\boldsymbol{\theta}\partial,每次都是选一下的事情。(全程可以用键盘完成) 当然如果想要用鼠标,Math Palette也会有所有你输入过的符号。

这个功能其实很小,代码也没几行。但它每天都在帮你省下几十次"输入同样的 LaTeX 命令"这个操作。写作的流畅感,靠的就是这些微小摩擦的消除。

看不到 Python 输出 → 内联代码执行

Ctrl+Shift+E 把当前单元格切换为 {code-cell}Shift+Enter 运行它。(也可以用命令面板里的 MyST: Insert Executable Cell 插入一个新的。)MyST Notebook 自己管理 Jupyter 内核------不需要安装 Jupyter 扩展,不需要额外启动服务。它会自动发现你的 Python 环境,自动安装 ipykerneljupyter-server(如果缺的话),然后把输出实时流到单元格下方。

你写的代码,立刻就给你看结果。没有构建步骤,没有"走到后厨"。

内核死了?下次运行自动重启。想换个 Python 环境?命令面板里调出 MyST: Reinstall Runtime ,重新选。需要用 SIGINT 打断一个跑飞的循环?MyST: Interrupt Kernel

就这样。写代码,跑代码,看输出。你专注的是内容,不是环境。

太重 → 纯 .md

MyST Notebook 不创建新的文件格式。你的文章就是一个普通的 .md 文件,安安静静躺在 docs/blog/posts/ 里,和 jupyter-book build 完美兼容。

Git 视角下,它就是纯文本。改一个错别字,diff 里只有那一行的变化。两个人在同一个文件上改了不同段落?正常的 merge,不是 JSON 地狱。

而且AI时代,Markdown本来也是对Agent很友好的一个格式。

你的写作成果是永远可读、永远可迁移的纯文本。扩展只是一个 view------关掉它,你的文章照样完整。


以下不是软文,是我自己的工具

有几个功能我本来没打算做,但自己用了一个星期后补上了,因为用的时候发现"这里缺点什么":

自动分割。 写完一段按 Enter,自动创建新单元格、光标就位。不用鼠标点"添加单元格"按钮,不用记快捷键------就跟你平时换行一样。这是对写作节奏影响最大的一个功能,但说出来反而显得最微不足道。

知识图谱。 Ctrl+Shift+G 打开一个 D3 力导向图,展示当前文件的所有 [[wikilinks]]{cite} 引用、反向链接。本来是用来做笔记间导航的,后来发现------写书的时候拿它来看章节之间的关系,比在文件树里翻来翻去直观得多。

Zotero 引用。 因为我自己写文章要引论文。一条命令配置好,Alt+Shift+Z 弹出文献选择器,选一个就插入 {cite}。WSL2 用户需要额外配一下网络,文档里写了。

Shorthand fences。 在 prose 单元格里打 run```` 然后 Enter,自动展开成 `{code-cell}` 代码块。打 show```` 则展开成纯展示的代码块。肌肉记忆养成了之后,比快捷键还快。


工具应该退到背景里

写这篇文章的时候,我一直开着这个扩展。不是演示,是真的在用。

过去写一篇三千字的文章,我的视线会在左右窗格之间扫上几百次。我会打开一个单独的"LaTeX 常用符号.md"文件来复制粘贴。我会写完代码块后注释掉或者信任它,然后等 jupyter book build 跑完再去验证。

今天我一次都没切过窗格。

不是因为这篇文章简单------恰恰相反,我写这篇文章的时候正好在做扩展的发布准备,反复在文字和代码之间切换。但这种切换发生在思路层面 ,不是操作层面。我脑子里想的是"这个功能对读者来说怎么描述",而不用先切到左侧编辑器,再打开预览"。

这就是我想达到的效果。一个在你不需要意识到它的时候,默默把事做好的工具。


MyST Notebook 刚正式上架 Marketplace -- v0.1.3 ,目前在最后打磨阶段。如果你写技术文档、用 Jupyter Book 或 MyST 生态、被上面这些痛点戳中过 -- 欢迎关注一下,尝试一下。欢迎来Github提各种问题呐。

如果你在 VS Code 里也有一堆 Markdown,也想跟那些预览窗格说再见 -- 那么,也许这个扩展就是给你的。

相关推荐
mCell2 天前
从 VS Code 学系统架构:回到当时,理解它为什么这样演进
架构·源码阅读·visual studio code
你脑门上的脚印3 天前
VSCode 更新后 Cmd(Ctrl)+点击终端地址在编辑器内部打开?一个设置帮你搞定
visual studio code
慢功夫5 天前
开篇:VS Code 为什么不是一个普通 React App
前端·visual studio code
慕容引刀5 天前
告别Commit信息纠结:使用Git AI Commit插件实现规范化提交
人工智能·git·github·visual studio code·visual studio
慢功夫10 天前
💡【调试】按下 F5 后,mini-vscode 到底做了什么
前端·visual studio code
慢功夫10 天前
按下 F5 后,mini-vscode 到底做了什么?
visual studio code
TT_Close17 天前
别劝退了!5秒搞定 Flutter 鸿蒙 FVM 起跑线
flutter·harmonyos·visual studio code
Flynt24 天前
装上TypeScript 7.0 RC之后,最让我意外不是10倍提速
typescript·visual studio code
golang学习记1 个月前
VSCode 1.124 新特性:使用快捷键重构AI协作的“心流”
visual studio code