Markdown .mdx 测试

这是一个从 Markdown 生成的页面，用于说明 Markdown 页面功能并测试一些边缘情况。

function Button() {
  return (
    <button type="button" onClick={() => alert('hey')}>
      Click me!
    </button>
  );
}

使用绝对路径​

选项卡​

评论​

HTML 评论

HTML 多行评论

MDX 评论

MDX 多行评论

从源代码文件导入代码块​

假设您有一个 React 组件。

您可以在 MDX 中导入并使用它

import MyComponent from './myComponent';

<MyComponent />;

但您也可以直接在 MDX 中显示其源代码，这要归功于 Webpack raw-loader

import CodeBlock from '@theme/CodeBlock';

import MyComponentSource from '!!raw-loader!./myComponent';

<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>;

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React, {useState} from 'react';

export default function MyComponent() {
  const [bool, setBool] = useState(false);
  return (
    <div>
      <p>MyComponent rendered !</p>
      <p>bool={bool ? 'true' : 'false'}</p>
      <p>
        <button onClick={() => setBool((b) => !b)}>toggle bool</button>
      </p>
    </div>
  );
}

测试​

function Demo() {
  useEffect(() => console.log('mount'), []);
  return null;
}

代码块测试​

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

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

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

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
      {/* prettier-ignore */}
      long long long long long long long long long long long long line
      {/* prettier-ignore */}
    </div>
  );
}

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

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

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

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

Mermaid​

自定义标题 ID​

奇怪的标题​

奇怪的标题​

奇怪的标题​

奇怪的标题​

奇怪的标题​

管道​

代码标签 + 双管道：||

代码标签 + 双管道：||

图片边缘情况​

详细信息​

这是一个片段

它应该可以正常工作 :)

任务列表​

一个列表

• 简单
• 任务
• 具有简单的
• 样式

另一个列表

• 嵌套
  • 任务
  • 应该格式良好
• 无论
• 多么奇怪

可以任意嵌套

• 级别
  • 任务
  • 任务
  • 另一级
    • 任务
    • 任务
    • 更深
      • 任务
      • 任务
    • 任务
    • 任务
• 任务

表情符号​

此文本中的表情符号将使用 remark-emoji 替换🐶 👍

警示​

链接​

这是一个测试页面，用于查看 Docusaurus Markdown 功能是否正常工作

链接到资源​

参见 #3337

• /someFile.pdf

• /someFile.xyz

• @site/_dogfooding/_asset-tests/someFile.pdf

• @site/_dogfooding/_asset-tests/someFile.xyz

链接到网站内托管的非 SPA 页面​

参见 #3309

• pathname:///dogfooding/javadoc

• pathname:///dogfooding/javadoc/index.html

• pathname://../dogfooding/javadoc

• pathname://../dogfooding/javadoc/index.html

使用 Link 组件链接到非 SPA 页面​

参见 #9758，这些外部链接不应被断链检查器报告

• ✅ pathname:///dogfooding/javadoc#goodlink1
• ✅ pathname:///dogfooding/javadoc#goodlink2
• ✅ /dogfooding/javadoc#goodlink3 (target=_blank)
• ✅ /dogfooding/javadoc#goodlink4 (target=_blank)

这些链接已损坏（尝试单击它们），应该报告。我们需要为它们明确禁用断链检查器

• ❌ /dogfooding/javadoc#badlink1
• ❌ /dogfooding/javadoc#badlink2
• ❌ /dogfooding/javadoc#badlink3 (target=_self)
• ❌ /dogfooding/javadoc#badlink4 (target=_self)

链接到 JSON​

• ./script.js

• ./data.json