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.

Live Editor

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

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

Result

Using absolute path#

Apple
Orange
Banana

This is an apple 🍎

Import Mdx and Md files#

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

<Chapter1 />;

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

<Chapter2 />;

Chapter 1#

Lorem ipsum chapter 1

Chapter 2#

Lorem ipsum chapter 2

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:

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 from 'react';

export default function MyComponent() {
  const [bool, setBool] = React.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>
  );
}

Using absolute path
Import Mdx and Md files
Comments
Import code block from source code file