Skip to main content

Markdown .mdx tests

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

info

Useful information.

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

Using absolute path​

Tab​

This is an apple 🍎

Comments​

Html comment:

Html comment multi-line:

MDX comment:

MDX comment multi-line:

Import code block from source code file​

Let's say you have a React component.

You can import and use it in MDX:

myMarkdownFile.mdx
import MyComponent from './myComponent';

<MyComponent />;
http://localhost:3000

MyComponent rendered !

bool=false

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

myMarkdownFile.mdx
import CodeBlock from '@theme/CodeBlock';

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

<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>;
http://localhost:3000
/**
* 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​

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

Code block test​

Title
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>
);
}
Live Editor
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>
  );
}
Result
Loading...

Mermaid​

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​

Details

Details without a summary

My Headline
Some Text
Details
Some Text

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

Emojis​

Emojis in this text will be replaced with remark-emoji: 🐢 πŸ‘

Admonitions​

Interpolated title with a (old syntax)

Admonition body

Interpolated title with a (directive label syntax)

Admonition body

important

Admonition alias :::important should have Important title

title

Some content with Markdown syntax.

nested Title
very nested Title

Some content with Markdown syntax.

Some content with Markdown syntax.

hey

Use tabs in admonitions
Admonition nested

test

Admonition in tab

test

Admonition content without heading

Linking​

This is a test page to see if Docusaurus Markdown features are working properly

Linking to assets​

See #3337

Linking to non-SPA page hosted within website​

See #3309

See #9758, these external urls should not be reported by the broken links checker:

These links are broken (try to single click on them) and should be reported. We need to explicitly disable the broken link checker for them:

Linking to JSON​