使用 Docusaurus v2 的选项卡中的 Markdown 内容

问题描述

我尝试在 Tab 中添加 Markdown 代码，如文档所述。

名称文件名具有 .mdx 扩展名。

这里是它的内容：

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

<Tabs
    defaultValue="javascript"
    values={[
        {label: 'Javascript',value: 'javascript'},{label: 'Other',value: 'other'},]}>
    <TabItem value="javascript">

```jsx
Formated code here
```

    </TabItem>
    <TabItem value="other">This is an orange ?</TabItem>
</Tabs>

但我收到此错误：

SyntaxError: /home/angelcc/projects/simplex/osm4scala/website/docs/example.mdx: Expected corresponding JSX closing tag for <TabItem> (21:0)

  19 | <TabItem value="other">This is an orange ?</TabItem>
  20 | `}</code></pre>
> 21 | </Tabs>
     | ^
  22 |     </MDXLayout>
  23 |   )
  24 | };

不知道我做错了什么。

版本：

"@docusaurus/core": "2.0.0-alpha.72","@docusaurus/preset-classic": "2.0.0-alpha.72","@mdx-js/react": "^1.6.21","clsx": "^1.1.1","react": "^17.0.1","react-dom": "^17.0.1"

npm 6.12.1
node v12.13.1

有什么建议吗？

解决方法

您应该删除标记 <TabItem> 和 </TabItem> 之前的空格。我不知道为什么，但它的工作。应该是这样的：

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

<Tabs
    defaultValue="javascript"
    values={[
        {label: 'Javascript',value: 'javascript'},{label: 'Other',value: 'other'},]}>
<TabItem value="javascript">

    ```jsx
    Formated code here
    ```

</TabItem>
<TabItem value="other">This is an orange</TabItem>
</Tabs>