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

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Using absolute path#

Import Mdx and Md files#

// *.md fileimport Chapter1 from './_chapter1.md';
<Chapter1 />;
// *.mdx fileimport Chapter2 from './_chapter2.mdx';
<Chapter2 />;

Lorem ipsum chapter 1

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:

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>;

/** * 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>  );}

Test#

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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>      {/* prettier-ignore */}      long long long long long long long long long long long long line      {/* prettier-ignore */}    </div>  );}

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

test

direct using of pre#

test

1 2 3

Custom heading id#

Children elements inside pre/code elements#

See https://github.com/facebook/docusaurus/pull/1584

Pipe#

Code tag + double pipe: ||

Code tag + double pipe: ||

Images edge cases#