docusaurus/website/src/pages/examples/markdownPageExample.md

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

Markdown page

This is a page generated from markdown to illustrate the Markdown page feature.

It supports all the regular MDX features, as you can see:

:::info

Useful information.

:::

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

Using absolute path

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 🍌

Import Mdx and Md files

// *.md file
import Chapter1 from './_chapter1.md';

<Chapter1 />;

// *.mdx file
import Chapter2 from './_chapter2.mdx';

<Chapter2 />;

import Chapter1 from './_chapter1.md';

import Chapter2 from './_chapter2.mdx';

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() {
  React.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>
  );
}

test

test