Import syntax design for external demo

[umijs]

Import syntax design for external demo

[sorrycc]

[$demo](./demo/Hello.jsx)

[sorrycc]

`$demo: ./demo/Hello.jsx`

[PeachScript]

[$demo](./demo/Hello.jsx)

@sorrycc 这个方案是否容易与用户的内容冲突，假设用户需要描述自己的一个内置变量，正好叫 $demo，然后锚点链接过去的话

[vthinkxie]

<!-- [demo=./demo/Hello.jsx]-->

[hstarorg]

$[demo标题](./demo/Hello.jsx) ，参考图片标签 ![图片alt](图片地址), 也就是方案2。中括号可以当成 demo 标题

[rdmclin2]

原来的 mdx 语法是支持复杂demo嵌入的，如

import demo1 from './demo1';

<Playground>
   <demo1 />
</Playground>

但是这种方式有个问题是实际用户看不到demo里面的代码，也无法修改，如果能够修正这个问题，我想用目前的方式也是ok的

[PeachScript]

@rdmclin2 是的，这也是一个方向，只是目前 father-doc 是基于 md 不是 mdx 的，主要考虑到 mdx 提供的便利性其实不比 md + 代码块 + 外部 demo 来得高

[PeachScript]

非常感谢各位提出的宝贵方案，在衡量当下和未来可能出现的需求后，决定采用 code 标签的方案，理由大概如下：

1. code 标签本身是常规语法，即便在普通的 markdown 阅读器或者 GitHub 的 preview 时，也能够做到『降级显示』，比如 <code src="./Normal.jsx">标准模式使用示例</code> 在降级显示时会变成『标准模式使用示例』；
2. code 作为 HTML 标签比较符合工程师的直觉；
3. HTML 标签可以承载更多属性的配置，比如后续覆盖类似 ant.design 的文档场景时，可以启用 glob 和分栏属性以支持批量导入 demo 并分栏显示：<code src="./demo/*.jsx" cols="2">Button 组件的在线 demo</code>。