markdownPageTests.md

title	description	wrapperClassName
Markdown Page tests title	Markdown Page tests description	docusaurus-markdown-example

Markdown page tests

This is a page generated from Markdown to illustrate the Markdown page feature and test some edge cases.

:::info

Useful information.

:::

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

Using absolute path

Tab

import Tabs from '@theme/Tabs';

import TabItem from '@theme/TabItem';

<Tabs defaultValue="apple" values={[ {label: 'Apple', value: 'apple'}, {label: 'Orange', value: 'orange'}, {label: 'Banana', value: 'banana'} ]}>This is an apple 🍎This is an orange 🍊This is a banana 🍌

Comments

MDX comments can be used with

<!--

My comment

-->

See, nothing is displayed:

Import code block from source code file

import MyComponent from "@site/src/pages/examples/_myComponent"

import BrowserWindow from '@site/src/components/BrowserWindow';

Let's say you have a React component.

You can import and use it in MDX:

import MyComponent from './myComponent';

<MyComponent />;

But you can also display its source code directly in MDX, thanks to Webpack raw-loader

import CodeBlock from '@theme/CodeBlock';

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

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

import CodeBlock from "@theme/CodeBlock"

import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent';

{MyComponentSource}

Test

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

Code block test

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>
      // highlight-start
      {/* prettier-ignore */}
      long long long long long long long long long long long long line
      {/* prettier-ignore */}
      // highlight-end
    </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>
  );
}

Custom heading ID {#custom}

Weird heading {#你好}

Weird heading {#2022.1.1}

Weird heading {#a#b}

Weird heading {#a b}

Weird heading {#a{b}

Pipe

Code tag + double pipe: ||

Code tag + double pipe: ||

Images edge cases

Details

Details without a summary

This is a fragment:

<>Hello</>

It should work :)

Task list

A list:

• Simple
• Tasks
• Has simple
• Styles

Another list:

• Nested
  • Tasks
  • Should be well-formatted
• No matter
• How weird

Can be arbitrarily nested:

• Level
  • Task
  • Task
  • Another level
    • Task
    • Task
    • Deeper
      • Task
      • Task
    • Task
    • Task
• Task

Admonitions

:::caution Interpolated title with a <button style={{color: "red"}} onClick={() => alert("it works")}>button

Admonition body

:::