【AI编程】面向文档编程:把 Markdown 当作源代码 ⌨️

系列说明:这是"面向文档编程"系列的第一篇。


TL;DR :eyes:

配置前后对比

配置链接


0. 现状:Markdown 是AI时代的源代码

自从高频使用 AI 辅助编程后,我发现一个明显的趋势:我们在 .md 文件里停留的时间,远多于 .py.ts 文件。

现在的开发流常常是这样:

image

在这种模式下,代码越来越像编译后的"生成物",而 Markdown 才是真正的"源代码"(Single Source of Truth)。

但痛点在于,Markdown 的原生编辑体验远不如代码编辑器。在非预览模式下,它往往是一坨灰白色的文本,重点难找,读起来慢且累,容易漏掉关键的 TODO 或决策点。

如果我们把 Markdown 当作代码写,它就应该拥有代码级的高亮、约束和阅读体验。


1. 理想的 Markdown"编程"体验

我不希望依赖"预览窗口"来阅读文档,那会占用屏幕空间且割裂编辑流。理想的源码级 Markdown 体验应该是:


2. 工具箱:4 个核心插件

为了达成上述效果,我精简了一套 VS Code 插件组合:


3. 核心:两层高亮体系

为了让 Markdown 在编辑模式下就像在看渲染后的网页,我们需要配置两层高亮:

第一层:语法符号高亮 (Token)

通过 VS Code settings.jsoneditor.tokenColorCustomizations,解决 Markdown 原生语法的样式。

image

第二层:语义内容高亮 (Regex)

通过 Highlight-Regex 插件,我们可以给纯文本语义设置高亮。

期望效果

image


4. 配置实践

为了方便大家直接抄作业,我整理了一份可以直接贴入 .vscode/settings.json 的配置。它包含了我调优过的配色(适配 Dark 主题)和常用的正则规则。

注意!!!
image
这里要填自己的主题名,或者直接把这一层删了(应用所有主题)

17 个赞

md文档在ai时代已经越来越像“可执行规格”了

1 个赞

感觉差别不大但肯定佬友想法,为什么不渲染一下显示呢

1 个赞

默认渲染没有高亮颜色,只有格式和大小区分。另一方面还是习惯像写代码一样写文档,来回看不太顺畅。

1 个赞

我在vscode试了,好像没这种效果。

1 个赞

感谢佬友分享,但是我的好像也没有生效


我进行的操作为:
四个插件都已经安装好,并且已经修改好了settings.json文件

1 个赞

image
这里要填自己的主题名,或者直接把这一层删了(应用所有主题)

配置了下,感觉很不错

1 个赞

image
这里要填自己的主题名,或者直接把这一层删了(应用所有主题),我上面没说清楚


感谢佬友,刚才我也问了下ai查阅报错了哈哈

1 个赞

佬 没搜到 Highlight-Regex 这个插件是不能vscode市场直接下载吗

我这里看还能搜到,从他们的github下载吧

1 个赞

感谢(★≧▽^))★☆