跳转至主内容

Markdown 页面

本页由 Markdown 渲染而来,用于展示其功能特性。

正如您所见,它支持所有 MDX 特性:

info

这里是有用信息。

实时编辑器
结果
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

使用绝对路径#

导入 MDX 和 MD 文件#

// *.md 文件import Chapter1 from './_chapter1.md';
<Chapter1 />;
// *.mdx 文件import Chapter2 from './_chapter2.mdx';
<Chapter2 />;

第一章

Lorem ipsum 第一章

第二章

Lorem ipsum 第二章

注释#

您可使用 MDX 注释


我的注释
-->```
看,这里不会显示:
<!--
My comment
-->
## 从源代码文件导入代码块
import MyComponent from "@site/src/pages/examples/\_myComponent"
import BrowserWindow from '@site/src/components/BrowserWindow';
假设您有一个 React 组件。
您可以在 MDX 中导入和使用它:
```jsx title="myMarkdownFile.mdx"import MyComponent from './myComponent';
<MyComponent />;

得益于 Webpack raw-loader,您可以在 MDX 中直接呈现其源码。

myMarkdownFile.mdx
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>  );}

测试#

实时编辑器
结果
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

代码块测试#

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>  );}
实时编辑器
结果
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
测试
测试
测试

直接使用 pre#

测试
1 2 3

自定义标题 ID#

pre/code 元素中的子元素#

参见 https://github.com/facebook/docusaurus/pull/1584

哈哈老铁
哈哈老铁

管道#

代码标签 + 双管道:||

代码标签 + 双管道:||

图片渲染的边缘案例#