docusaurus使用指南
Markdown 特性
告示
语法：
:::tmp
:::
其中 tmp 可以替换为下面 5 个类型：
- note，灰色
- tip，绿色
- info，蓝色
- caution，黄色
- danger，红色
note
Some content with markdown syntax. Check this api.
tip
Some content with markdown syntax. Check this api.
info
Some content with markdown syntax. Check this api.
caution
Some content with markdown syntax. Check this api.
danger
Some content with markdown syntax. Check this api.
你也可以指定告示标题名，只需要在 tmp 后面加上你的标题名即可。
代码块
给代码块加上标题
你可以在语言后添加 title 键（在后面添加空格）来添加标题。
```jsx title="/src/components/HelloCodeTitle.js"
function HelloCodeTitle(props) {
return <h1>你好，{props.name}</h1>;
}```
/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {
return <h1>你好，{props.name}</h1>;
}
代码行高亮
在需要高亮的那一行加上 {行号}
```jsx title="/src/components/HelloCodeTitle.js" {3}
function HighlightSomeText(highlight) {
if (highlight) {
return '这句被高亮了！';
}
return '这句没有';
}```
/src/components/HelloCodeTitle.js
function HighlightSomeText(highlight) {
if (highlight) {
return '这句被高亮了！';
}
return '这句没有';
}
要高亮多行内容，请使用半角逗号来分隔行号，或使用范围语法来选择多行代码块。 此功能使用 parse-number-range 库，您可在其项目详情中找到更多语法。
```jsx {1,4-6,11}
import React from 'react';
function MyComponent(props) {
if (props.isBar) {
return <div>Bar</div>;
}
return <div>Foo</div>;
}
export default MyComponent;```
另外，你也可以在代码块中使用注释来进行高亮：
highlight-next-linehighlight-starthighlight-end
```jsx
function HighlightSomeText(highlight) {
if (highlight) {
return 'This text is highlighted!';
}
return 'Nothing highlighted';
}
function HighlightMoreText(highlight) {
if (highlight) {
return 'This range is highlighted!';
}
return 'Nothing highlighted';
}```
实时代码编辑器
这里提供了 实时代码编辑器，仅支持 JSX 语法，能够让你实时编辑和渲染某个组件。
MDX 与 React
在 Markdown 中使用 JSX
你可以直接在 MDX 中定义一个 React 组件，然后直接使用它：
// 定义了一个 React 组件，注意这里必须加上 export
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}>
{children}
</span>
);
// 直接在 mdx 内使用组件，不需要使用 render 啥的其他函数，直接把组件放在这里就可以现实了
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
// 其他 mdx 内容
I can write **Markdown** alongside my _JSX_!
当然，你也可以通过 import 导入一个外部组件：
import Counter from '../components/Counter'
<Counter />
导入文件原始代码到代码块中
有时候有一个需求就是，我们编写文档时，想要把项目中的某个文件内的源代码放入到代码块内，如果手动复制比较麻烦，而且源码发生修改后，还需要手动去该文档内的代码块内容，docusaurus 中支持将某个源码文件内容直接插入到 mdx 中的代码块中。
详情查看官方文档：导入原始代码
选项卡
直接在 mdx 中写入下面代码：
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="apple" label="Apple" default>
This is an apple 🍎
</TabItem>
<TabItem value="orange" label="Orange">
This is an orange 🍊
</TabItem>
<TabItem value="banana" label="Banana">
This is a banana 🍌
</TabItem>
</Tabs>
- Apple
- Orange
- Banana
This is an apple 🍎
This is an orange 🍊
This is a banana 🍌