1 这是一些测试
1.1 测试代码样式
javascript是最受欢迎的编程语音之一，他的变量声明语法类似这样，注意const赋值是不可修改的。
demo.js
var a = 1;
let b = 2;
const c = 3;
console.log(a + b + c);
如果代码块语音prism不识别:
这是无语言标记的markdown
1.2 测试表格
源代码为：
| 姓名 | 年龄 | 性别 |
| ---- | ---- | ---- |
| 张三 | 18 | 男 |
输出效果如下：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张三 | 18 | 男 |
1.3 测试嵌入html模块
源码为
<div style={{background: 'red', color: 'white', fontSize: '2rem'}}>你好</div>
输出效果如下:
你好
1.4 测试嵌入React组件
从antd中引入了常用的Card、Tooltip、Button、DirectoryTree组件，以及自己写的Tabs/Item组件可以直接在mdx文件中使用，直接嵌入代码和效果如下
<div className="flex">
<Card style={{ width: 300, border: '1px solid' }}>
<Tooltip title="prompt text">
<Button type={'primary'}>ant design</Button>
</Tooltip>
</Card>
<Card style={{ width: 300 }}>
<DirectoryTree
multiple
defaultExpandAll
treeData={[
{title: 'parent 0', children: [{ title: 'leaf 0-0', isLeaf: true},{ title: 'leaf 0-1', isLeaf: true}]},
{title: 'parent 1', children: [{ title: 'leaf 1-0', isLeaf: true},{ title: 'leaf 1-1', isLeaf: true}]},
]}
/>
</Card>
<Card style={{ width: 300 }}>
<Tabs defaultIndex={0}>
<Item title={"tab1"}>Content of tab1</Item>
<Item title={"tab2"}>Hello Mdx</Item>
</Tabs>
</Card>
</div>
parent 0
leaf 0-0
leaf 0-1
parent 1
leaf 1-0
leaf 1-1
Content of tab1
Hello Mdx
1.5 测试嵌入iframe工具
CodeSandBox
Jsrun