Markdown 扩展

• <LiveEditor></LiveEditor> : 实时渲染组件Demo
• <ApiTable></ApiTable> : 根据Ts类型生成对应文档
• 支持 task list

Demo 渲染

在 markdown文件中，使用 vue 语法(为什么用vue语法)引入扩展组件LiveEditor，并传入sourceCodePath(使用相对路径)属性，即可渲染出演示代码。

<!-- 引入演示源码使用相对路径 -->

<LiveEditor sourceCodePath="../demo/example/index.jsx"></LiveEditor>

LiveEditor 属性:

属性	说明	类型	默认值
noStyle	是否显示边框样式(目前仅有padding)	boolean	false
hideCode	是否显示源码	boolean	false
sourceCodePath	代码路径(相对路径)	string	null

import { Button, Space } from '@arco-design/web-react';

const Example = () => {
  return (
    <div>
      <Space size="large">
        <Button type="primary">Primary</Button>
        <Button type="secondary">Secondary</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="outline">Outline</Button>
        <Button type="text">Text</Button>
        <Button type="primary">Primary</Button>
        <Button type="secondary">Secondary</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="outline">Outline</Button>
        <Button type="text">Text</Button>
      </Space>
    </div>
  );
};

render(<Example />);

渲染如下: 👇 👇 可以试试编辑，会实时编译渲染

API 生成

在 markdown 文件中 使用 ApiTable 组件，并传入path属性，即可自动渲染出API文档

暂定的方案

目前ts文档生成使用的react-docgen-typescript，对于多层级引用无法正确渲染,后续可能会更改方案

<!-- 引入演示源码使用相对路径 -->

<ApiTable path="../demo/example/index.jsx"></ApiTable>

import { Button, Space } from '@arco-design/web-react';

const Example = () => {
  return (
    <div>
      <Space size="large">
        <Button type="primary">Primary</Button>
        <Button type="secondary">Secondary</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="outline">Outline</Button>
        <Button type="text">Text</Button>
        <Button type="primary">Primary</Button>
        <Button type="secondary">Secondary</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="outline">Outline</Button>
        <Button type="text">Text</Button>
      </Space>
    </div>
  );
};

render(<Example />);

渲染如下： 👇 👇

Task list 使用

使用 - [ ] somethingor - [x] something

渲染如下： 👇 👇

• something
• something