跳到主要内容

Markdown Features

导入 Component​

import BrowserWindow from "@site/src/components/BrowserWindow";

<BrowserWindow>Hello, world</BrowserWindow>;
https://hcynus.eu.org
Hello, world

导入代码片段​

可以将任何代码文件作为原始文本导入，然后将其插入到代码块中，这要归功于Webpack raw-loader。

使用前需要安装 raw-loader:

npm install --save raw-loader

使用:

myMarkdownFile.mdx
import CodeBlock from "@theme/CodeBlock";
import MyComponentSource from "!!raw-loader!./assets/myComponent";

<CodeBlock language="jsx">{MyComponentSource}</CodeBlock>;
https://hcynus.eu.org
/**
 * 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>
  );
}

导入 Markdown​

可以将 Markdown 文件作为组件使用，并在其他地方导入，无论是在 Markdown 文件中还是在 React 页面中。

_markdown-partial-example.mdx
<span>Hello {props.name}</span>

This is text some content from `_markdown-partial-example.mdx`.
import PartialExample from "./assets/_markdown-partial-example.mdx";

<PartialExample name="Sebastien" />;
https://hcynus.eu.org
Hello Sebastien

This is text some content from _markdown-partial-example.mdx.

代码行高亮​

  • highlight-next-line
  • highlight-start
  • highlight-end
```js
function HighlightSomeText(highlight) {
  if (highlight) {
    // highlight-next-line
    return 'This text is highlighted!';
  }

  return 'Nothing highlighted';
}

function HighlightMoreText(highlight) {
  // highlight-start
  if (highlight) {
    return 'This range is highlighted!';
  }
  // highlight-end

  return 'Nothing highlighted';
}
```
https://hcynus.eu.org
function HighlightSomeText(highlight) {
  if (highlight) {
    return 'This text is highlighted!';
  }

  return 'Nothing highlighted';
}

function HighlightMoreText(highlight) {
  if (highlight) {
    return 'This range is highlighted!';
  }

  return 'Nothing highlighted';
}

自定义 Magic Comments​

export default {
  themeConfig: {
    prism: {
      magicComments: [
        // Remember to extend the default highlight class name as well!
        {
          className: 'theme-code-block-highlighted-line',
          line: 'highlight-next-line',
          block: {start: 'highlight-start', end: 'highlight-end'},
        },
        {
          className: 'code-block-error-line',
          line: 'This will error',
        },
      ],
    },
  },
};
https://hcynus.eu.org

In JavaScript, trying to access properties on null will error.

const name = null;
console.log(name.toUpperCase());
// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')

交互式代码编辑器​

通过 @docusaurus/theme-live-codeblock 插件创建交互式编码编辑器。

安装插件:

npm install --save @docusaurus/theme-live-codeblock

配置 docusaurus.config.js:

export default {
  // ...
  themes: ['@docusaurus/theme-live-codeblock'],
  // ...
};

创建交互式代码编辑器:

```jsx live
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
```
https://hcynus.eu.org
实时编辑器
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
结果
Loading...