메인 컨텐츠로 이동

Markdown .mdx tests

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

정보

Useful information.

라이브 에디터
function Button() {
  return (
    <button type="button" onClick={() => alert('hey')}>
      Click me!
    </button>
  );
}
결과
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

라이브 에디터
function Demo() {
  useEffect(() => console.log('mount'), []);
  return null;
}
결과
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>
);
}
라이브 에디터
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>
  );
}
결과
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