- 介绍
- 什么是 dumi
Open-source MIT Licensed | Copyright © 2019-present
Powered by self
Powered by self
dumi 对 HTML 默认的 embed
标签做了扩展,允许在 Markdown 文档中嵌入另一个 Markdown 文档的内容
<!-- 引入全量的 Markdown 文件内容 --><embed src="/path/to/some.md"></embed><!-- 根据行号引入指定行的 Markdown 文件内容 --><embed src="/path/to/some.md#L1"></embed><!-- 根据行号引入部分 Markdown 文件内容 --><embed src="/path/to/some.md#L1-L10"></embed><!-- 根据正则引入部分 Markdown 文件内容 --><embed src="/path/to/some.md#RE-/^[^\r\n]+/"></embed>
dumi 内置了 Badge 组件,可以为 Markdown 内容(例如标题)添加标签,例如:
### Info Badge <Badge>info</Badge>### Warning Badge <Badge type="warning">warning</Badge>### Error Badge <Badge type="error">error</Badge>### Success Badge <Badge type="success">success</Badge>
会被渲染为:
需要在正文中以醒目的方式展示额外信息时,可以使用 Container 扩展语法,例如:
:::info{title=自定义标题}这是一条普通信息::::::success这是一条成功信息::::::warning这是一条警告信息::::::error这是一条错误信息:::
将会被渲染为:
这是一条普通信息
这是一条成功信息
这是一条警告信息
这是一条错误信息
在代码块中,如果您想要突出显示特定的一行,可以使用行高亮功能。使用行高亮功能的语法如下:
```jsx {5} | pure
import React from 'react';
export default () => (
<div>
<h1>Hello dumi!</h1>
</div>
);
```
渲染为:
import React from 'react';export default () => (<div><h1>Hello dumi!</h1></div>);
除了单行之外,你还可以指定多个单行、范围或两者:
{5}
, 逗号分隔指定多个行,如:{4,7,9}
。{5-8}
。{4,7-13,16,23-27,40}
。```yml {3,6-9,12,13}
features:
- title: 更好的编译性能
emoji: 🚀
- title: 内置全文搜索
emoji: 🔍
- title: 全新主题系统
emoji: 🎨
- title: 约定式路由增强
emoji: 🚥
- title: 资产元数据 2.0
emoji: 💡
- title: 继续为组件研发而生
emoji: 💎
```
渲染为:
features:- title: 更好的编译性能emoji: 🚀- title: 内置全文搜索emoji: 🔍- title: 全新主题系统emoji: 🎨- title: 约定式路由增强emoji: 🚥- title: 资产元数据 2.0emoji: 💡- title: 继续为组件研发而生emoji: 💎
使用 Tree 组件可以创建文件树,使用语法如下:
<Tree><ul><li>src<ul><li>directory <ul></ul></li><li>index.md</li></ul></li><li>package.json</li></ul></Tree>
渲染为:
通过添加 small
元素可以为节点添加注释内容。
<Tree><ul><li>src+ <small>这是 src 文件夹</small><ul><li>directory+ <small>没有子项的文件夹</small><ul></ul></li><li>index.md+ <small>这是 index.md</small></li></ul></li><li>package.json+ <small>这是 package.json</small></li></ul></Tree>
渲染为:
需要将多代码块合并成一个分组进行展示时,可以使用 CodeGroup 语法,例如:
将会被渲染为:
npm install -D dumi
:::code-group```bash [npm]npm install -D dumi``````bash [yarn]yarn add -D dumi``````bash [pnpm]pnpm add -D dumi``````ts [.dumirc.ts] {3}import { defineConfig } from 'dumi';export default defineConfig({// ...});```:::