Hello World!!!

标题

您准备好为您的开源项目创建文档站点了吗？

右侧-1级标题

标题将显示在右上方的目录中

以便用户无需向下滚动，甚至无需阅读更多内容，便可了解此页的梗概。

列表

• lists will help you
• present the key points
• that you want your users to remember
  • and you may nest them
    • multiple times

自定义id

{#custom-id}

右侧-2级标题

加粗： bold 链接

图片：

引言：

Easy to maintain open source documentation websites.

— Docusaurus

details 元素: 展开/收起块

Toggle me!

This is the detailed content

Nested toggle! Some surprise inside...

😲😲😲😲😲

MDX组件

Docusaurus green and Facebook blue are my favorite colors.

I can write Markdown alongside my JSX!

导入第三方组件中定义的自己的组件

Docusaurus green

组件作用域

• src/theme/MDXComponents.js 中引入

• src/pages/index.js 入口文件中使用 <MDXContent></MDXContent>包裹作用的范围外

在 MDX 页面中，以下变量可以作为全局变量使用:

• frontMatter: 字符串键和值的记录;
• toc: 目录，如标题树。参见 Inline TOC
• contentTitle: markdown的标题，这是第一个 h1 标题，如果没有则为undefined

目录树：

[
  {
    "value": "右侧-1级标题",
    "id": "右侧-1级标题",
    "level": 2
  },
  {
    "value": "列表",
    "id": "列表",
    "level": 2
  },
  {
    "value": "自定义id",
    "id": "custom-id",
    "level": 2
  },
  {
    "value": "右侧-2级标题",
    "id": "右侧-2级标题",
    "level": 3
  },
  {
    "value": "details 元素: 展开/收起块",
    "id": "details-元素-展开收起块",
    "level": 2
  },
  {
    "value": "MDX组件",
    "id": "mdx组件",
    "level": 2
  },
  {
    "value": "导入第三方组件中定义的自己的组件",
    "id": "导入第三方组件中定义的自己的组件",
    "level": 3
  },
  {
    "value": "组件作用域",
    "id": "组件作用域",
    "level": 3
  },
  {
    "value": "在 MDX 页面中，以下变量可以作为全局变量使用:",
    "id": "在-mdx-页面中以下变量可以作为全局变量使用",
    "level": 3
  },
  {
    "value": "标签组",
    "id": "标签组",
    "level": 3
  },
  {
    "value": "defaultValue - 4个#右侧导航栏不显示",
    "id": "defaultvalue---4个右侧导航栏不显示",
    "level": 4
  },
  {
    "value": "groupId 相同时，同步选中的标签卡",
    "id": "groupid-相同时同步选中的标签卡",
    "level": 4
  },
  {
    "value": "className 自定义样式",
    "id": "classname-自定义样式",
    "level": 4
  },
  {
    "value": "多格式的代码Tab",
    "id": "多格式的代码tab",
    "level": 3
  },
  {
    "value": "npm/ yarn 指令使用，只写一个npm",
    "id": "npm-yarn-指令使用只写一个npm",
    "level": 3
  },
  {
    "value": "引入文件代码 raw-loader",
    "id": "引入文件代码-raw-loader",
    "level": 2
  },
  {
    "value": "引入代码段",
    "id": "引入代码段",
    "level": 2
  },
  {
    "value": "代码高亮 - prism",
    "id": "代码高亮---prism",
    "level": 3
  },
  {
    "value": "代码行高亮",
    "id": "代码行高亮",
    "level": 3
  },
  {
    "value": "注释系统  magicComments",
    "id": "注释系统--magiccomments",
    "level": 3
  },
  {
    "value": "显示行号  showLineNumbers",
    "id": "显示行号--showlinenumbers",
    "level": 3
  },
  {
    "value": "交互式代码编辑器",
    "id": "交互式代码编辑器",
    "level": 2
  },
  {
    "value": "安装",
    "id": "安装",
    "level": 3
  },
  {
    "value": "配置",
    "id": "配置",
    "level": 3
  },
  {
    "value": "应用",
    "id": "应用",
    "level": 3
  },
  {
    "value": "执行输入的代码，使用pre/code/CodeBlock标签",
    "id": "执行输入的代码使用precodecodeblock标签",
    "level": 2
  },
  {
    "value": "告示框 note",
    "id": "告示框-note",
    "level": 2
  },
  {
    "value": "组件写法",
    "id": "组件写法",
    "level": 4
  }
]

头部front matter配置：

• id: helloWorld
• slug: /test
• tags: helloWorld
• description: helloWorld

标题： Hello World!!!

标签组

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

defaultValue - 4个#右侧导航栏不显示

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

groupId 相同时，同步选中的标签卡

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

Windows

Use Ctrl + C to copy.

macOS

Use Command + C to copy.

Windows

Use Ctrl + V to paste.

macOS

Use Command + V to paste.

className 自定义样式

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

多格式的代码Tab

JavaScript

function helloWorld() {
  console.log('Hello, world!');
}

Python

def hello_world():
  print("Hello, world!")

Java

class HelloWorld {
  public static void main(String args[]) {
    // ...
  }
}

npm/ yarn 指令使用，只写一个npm

npm i @docusaurus/remark-plugin-npm2yarn

module.exports = {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [
            [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
          ],
        },
        pages: {
          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
        },
        blog: {
          // ...
        },
      },
    ],
  ],
};

npm

npm install @docusaurus/remark-plugin-npm2yarn

Yarn

yarn add @docusaurus/remark-plugin-npm2yarn

引入文件代码 raw-loader

npm install --save raw-loader

import React from 'react';

export default function (props) {
  return (
    <div></div>
  )
}

引入代码段

/src/components/HelloCodeTitle.js

function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}

console.log('Every repo must come with a mascot.');

代码高亮 - prism

prism: {
  theme: lightCodeTheme,
  darkTheme: darkCodeTheme,
  //
  // 语法高亮主题，默认使用 Prism 的 Palenight
  // theme: require('prism-react-renderer/themes/vsLight'),
  // darkTheme: require('prism-react-renderer/themes/vsDark'),
  defaultLanguage: 'javascript',
},

代码行高亮

• highlight-next-line
• highlight-start / highlight-end
• 元字符串中指定突出显示的行范围，如：{1,4-6,11}

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';
}

import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;

注释系统 magicComments

In JavaScript, trying to access properties on null will error.

const name = null;
console.log(name.toUpperCase());
// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')

显示行号 showLineNumbers

import React from 'react';function MyComponent(props) {  if (props.isBar) {    return <div>Bar</div>;  }  return <div>Foo</div>;}export default MyComponent;

交互式代码编辑器

安装

npm install --save @docusaurus/theme-live-codeblock

配置

docusaurus.config.js

module.exports = {
  // ...
  themes: ['@docusaurus/theme-live-codeblock'],
  // ...
};

应用

在代码段后面添加 live 字段，就可以编辑代码了， return 可以实时输出结果

实时编辑器

function Clock(props) { const [date, setDate] = useState(new Date()); useEffect(() => { const timerID = setInterval(() => tick(), 1000); return function cleanup() { clearInterval(timerID); }; }); function tick() { setDate(new Date()); } return ( <div> <h2>It is {date.toLocaleTimeString()}.</h2> </div> ); }

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

结果

Loading...

执行输入的代码，使用pre/code/CodeBlock标签

Input: 1 2 3 4
Output: "366300745"

Input: 1 2 3 4
Output: "366300745"

Input: 1 2 3 4
Output: "366300745"

告示框 note

自定义标题

Some content with Markdown syntax. Check this api.

提示

Some content with Markdown syntax. Check this api.

信息

Some content with Markdown syntax. Check this api.

警告

Some content with Markdown syntax. Check this api.

危险

Some content with Markdown syntax. Check this api.

Use tabs in admonitions

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

组件写法

💡Did you know...

Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.