Markdown page tests

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

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

Using absolute path​

Tab​

Comments​

MDX comments can be used with

<!--

My comment

-->

See, nothing is displayed:

Import code block from source code file​

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

/**
 * 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>
  );
}

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>
      {/* 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>
  );
}

Custom heading ID​

Weird heading​

Weird heading​

Weird heading​

Weird heading​

Weird heading​

Pipe​

Code tag + double pipe: ||

Code tag + double pipe: ||

Images edge cases​

Details​

This is a fragment:

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​

after admonition