0.0.9 • Published 3 years ago
@race-ui/markdown v0.0.9
@race-ui/markdown 说明文档
markdown文档转HTML， 并且静态react代码，在线编辑与运行。 具体细节请查看 examples
安装
npm install @race-ui/react-live @race-ui/markdown --save引入
import Markdown from '@race-ui/markdown';
import '@race-ui/react-live/assets/index.css';
import '@race-ui/markdown/assets/index.css';写法
import Markdown from '@race-ui/markdown';
const markdownValue = `Markdown 文档`;
ReactDOM.render(<Markdown value={markdownValue} />, mountNode);API
| 属性 | 默认值 | 参数类型 | 用法说明 |
|---|---|---|---|
| value | 必传 | string | Markdown 文档 |
| className | - | string | 该组件样式 |
| defaultShowType | 'All' | ShowType（'All','Code','Preview'） | UI显示情况（'All': code与运行结果都显示， ‘Code’: 只显示code, 'Preview': 只显示渲染的UI） |
| scope | 'React', 'ReactDOM', 'mountNode' | ReactLiveScope | 执行code中的方法、组件等变量 |
| navType | MarkdownNavType.Right | MarkdownNavType('Left', 'Right', 'None') | 'Left: 导航放在左边', 'Right: 导航放在右边', 'None: 不开启导航' |
| offsetScrollTop | 70 | number | 开启导航后，固定位置到顶部的距离， 当navType为None时， 此属性无用 |
| onNotifyRunCode | - | (code: string) => void | 标识react-run的代码块按钮点击触发回调 |
markdown文档中开启React/Javascript代码执行
在代码块后空格加 react-run 标识, 将会使用@race-ui/react-live代码在线执行库，执行Markdown文档中代码。
若React组件需在代码块中写入渲染方法： ReactDOM.render(<Demo />, mountNode)。