切换选项卡形式的代码面板

表白：黑白圣堂血天使，天剑鬼刀阿修罗。 
讲解对象：/切换选项卡形式的代码面板
作者：融水公子 rsgz
Docusaurus教程

Docusaurus教程 http://www.rsgz.top/post/341.html

大家看到的这样形式的代码面板我也可以实现

实现过程：

### 本地启动网站

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs defaultValue="yarn" values={[
{ label: 'yarn', value: 'yarn', },
{ label: 'npm', value: 'npm', }
]
}>

<TabItem value="yarn">

```txt
cd my-website
yarn run start
url:http://localhost:3000
```

</TabItem>
<TabItem value="npm">

```txt
cd my-website
npm run start
url:http://localhost:3000
```

</TabItem>

</Tabs>

者最大的问题就是编辑页面的代码太长了，还不如简单一点的,这样我的编辑页面不会很多的代码。

### 构建
网站构建到静态内容/build 目录下，并将其放置在 Web 服务器上，以便可以对其进行查看。
该目录可以复制到任何静态文件托管服务上，例如 GitHub pages、Vercel 或 Netlify。
```angular2html
npm run build
或者
yarn run build
```

===

公众号：小雪妃

谢谢大家的支持！可以点击我的头像，进入我的空间浏览更多文章呢。建议大家360doc[www.360doc.com]注册一个账号登录，里面真的有很多优秀的文章，欢迎大家的到来。
---