vscode-any-block

[!WARNING]

得益于 AnyBlock 项目已经提供了完整的 markdown-it-any-block 库， 而 VSCode 默认的 Markdown 渲染行为又依赖于 markdown-it，所以本质上只是简单地应用 markdown-it 扩展罢了。

所以该项目虽然完全 vibe，但评估无风险，也人工检查过没有其他风险漏洞，可放心使用。

为 VS Code 内置 Markdown 预览提供 AnyBlock 规则的渲染扩展。

AnyBlock 是一个「用多种方式灵活创建『块』」的通用 Markdown 扩展（Obsidian / markdown-it / VuePress 插件）。 本扩展把它的 markdown-it 插件接入 VS Code 内置预览，让 .md 文件在按下 Ctrl/Cmd+Shift+V 时就能渲染 AnyBlock 块。

功能特性

• 复用官方 markdown-it-any-block（^3.5.0）作为渲染核心。
• 通过 markdown.markdownItPlugins 扩展内置 Markdown 预览，对所有 .md 文件生效。
• 内置样式：将 AnyBlock 的 styles.css 连同「VS Code 主题变量桥接」一起注入预览，自动适配浅色/深色主题。
• 交互支持：标签页、折叠、目录树、树形表格的行折叠等，通过 markdown.previewScripts 重新绑定（VS Code 会过滤内联 onclick）。

已验证可用的规则

语法示例（详见 samples/demo.md）：

[list2table]
- 名称
  - 苹果
  - 香蕉
- 数量
  - 3
  - 5

工作原理

1. extension.ts 的 activate() 返回 { extendMarkdownIt(md) }，在其中注册 md.use(ab_mdit)。 VS Code 会在首次打开预览时惰性激活本扩展（见官方 Markdown 扩展指南）。
2. AnyBlock 的 markdown-it 插件在 扩展宿主（Node.js） 中渲染，需要 document 全局对象。 由于插件的 jsdom_init() 是异步的、而 extendMarkdownIt() 是同步的， 本扩展在 src/dom-env.ts 中同步地、在模块加载时完成 jsdom 全局注入。
3. 样式通过 markdown.previewStyles 注入：media/any-block.css（官方样式，构建时从 node_modules/markdown-it-any-block/styles.css 复制）+ media/any-block-theme.css（主题变量桥接）。
4. 交互通过 markdown.previewScripts 注入 media/any-block-client.js， 用事件委托重新实现标签页切换、折叠、树形表格行折叠等行为。

开发与使用

# 1. 安装依赖（会把 npm 缓存放到工作区内，避免权限问题时可加 --cache 参数）
npm install

# 2. 复制官方样式 + 编译 TypeScript
npm run vendor
npm run compile

# 3. 在 VS Code 中按 F5 启动「扩展开发宿主」，打开任意 .md 并 Ctrl/Cmd+Shift+V

不依赖 VS Code 的独立验证脚本：

node scripts/render-test.mjs samples/demo.md   # 直接渲染并输出 HTML
node scripts/smoke-test.mjs                    # 加载 dist/extension.js 端到端自检

打包为 .vsix：

npm run package   # 需要 @vscode/vsce

目录结构

vscode-any-block/
├── package.json          # 扩展清单（贡献点、依赖、脚本）
├── tsconfig.json         # TypeScript 配置（含 markdown-it-any-block 类型映射）
├── src/
│   ├── extension.ts      # 入口：注册 extendMarkdownIt
│   ├── dom-env.ts        # 同步 jsdom 环境
│   └── types/            # markdown-it-any-block 本地类型声明
├── media/
│   ├── any-block.css         # 官方样式（vendor 生成）
│   ├── any-block-theme.css   # VS Code 主题变量桥接
│   └── any-block-client.js   # 预览脚本：交互
├── scripts/
│   ├── vendor-styles.mjs     # 复制官方样式到 media/
│   ├── render-test.mjs       # 独立渲染脚本
│   └── smoke-test.mjs        # 编译产物自检
├── samples/demo.md       # 演示用 Markdown
└── dist/                 # tsc 编译产物（gitignore）

已知限制

• list2mermaid / list2mindmap / list2markmap / list2echarts_* 等需要客户端渲染库 （mermaid、markmap、echarts），当前版本未集成；这些规则会以原始代码块形式显示。
• 部分高级/装饰规则（title 等）在 markdown-it 服务端环境下的表现与 Obsidian 插件略有差异。
• 关于上游项目与完整规则文档，请参考 any-block 仓库。

参考项目

• any-block/any-block — AnyBlock 主体（Obsidian / markdown-it / VuePress）。
• any-block/VuepressDemo — 在 VuePress 中以 devDependencies 依赖 markdown-it-any-block 的使用示例。

许可证

AGPL-3.0（SPDX 标识，见 package.json），与上游 markdown-it-any-block 保持一致。