๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ

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โ€‹

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โ€‹