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

使用連結元件連結到非 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