Closed
Description
背景
如果仅提供在 .md 中写代码块来生成 demo 的方式，会有以下两个问题：
- 复杂组件的 demo 也会比较多，.md 会混乱难以管理
- 在 .md 中写 tsx/jsx 无法得到编辑器的各种辅助（lint、snippets、autocomplete & etc.），在编写复杂 demo 的时候效率会非常低
所以计划在 father-doc 中新增一种 markdown 扩展语法，使得编写者可以主动从外部导入 .tsx/jsx 文件生成 demo。
要求
语法的设计非常重要，因为关乎后续编写者的内容创作，一旦方案确定，后续再难修改。设想之下，大致有如下几点要求：
- 维持 markdown style，不能有违和感
- 支持传递文件路径
- (欢迎补充)
提案
加上 issue 中大家提出的方案，目前共有 5 种备选方案：
- 去骨去尾代码块方案：
```./demo/Hello.jsx - 超链接/图片师出同门方案：
$[](./demo/Hello.jsx) - UBB 借鉴一刀流方案：
[demo=./demo/Hello.jsx] - HTML 注释方案：
<!-- [demo=./demo/Hello.jsx] --> - code 标签降级兼容方案：
<code src="./demo/Hello.jsx">fallback 文本</code>
需要特殊说明的是第 3 种方案，此方案可以用类似的语法扩展出更多的自定义语法，一脉相承，比如：
- 自定义标签语法，渲染类似 antd 的标签组件：
[badge=1.0.0-Beta.1 danger] - 自定义警告块语法，渲染类似 antd 的 Alert 组件：
[alert=天干物燥 title=小心火烛 warn]
讨论
目前前 3 种方案看起来都有一些小问题：
- 如果次行正好为另一个代码块，无论是 transformer 的 token 识别还是编写者肉眼识别，都会造成干扰
- 中间的方括号没有没有实际作用
- 历史感很浓重，毕竟是论坛时代的标签语法
如果大家对这 5 种方案有独特看法，或者有更好的方案，欢迎进行讨论。