DOCusaurusのライブコード編集

Docusaurus is a tool designed to make it easy for teams to publish documentation websites without having to worry about the infrastructure and design details.

Docusaurus 2 それは多くの新機能をもたらしているが、私の最も好きなものはlive code editing . それはあなたが本当に良いユーザーエクスペリエンスを与えるあなたのコンテキストを切り替えることなく実行時にあなたの変更をプレビューすることができます.

インストール
あなたのウェブサイトのライブコード編集を有効にする公式のプラグインがあります.@docusaurus/theme-live-codeblock . このテーマは@theme/CodeBlock コンポーネントreact-live .
まず、プラグインをあなたのウェブサイトにインストールします.

yarn add @docusaurus/theme-live-codeblock

また、プラグインを追加する必要がありますdocusaurus.config.js .

module.exports = {
  // ...
  themes: ['@docusaurus/theme-live-codeblock'],
  // ...
};

用途
プラグインを使用するには、言語メタ文字列に接続されたLiveでコードブロックを作成します.

```jsx live
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>
  );
}
```

コードブロックは対話型エディタとしてレンダリングされます.コードの変更は結果パネルのライブで反映されます.

第三者コンポーネント
デフォルトでReact MDXファイルのライブコードブロックの範囲にあるが、サードパーティのコンポーネントをレンダリングするためには、デフォルトのテーマをスワイプしてスコープ内のコンポーネントを追加する必要があります.@docusaurus/theme-classic .
コンポーネントをテーマにドラッグするには、DOCサイトで次のコマンドを実行します.

docusaurus swizzle <theme name> [component name]

私たちの場合、テーマ名は@docusaurus/theme-classic コンポーネント名MDXComponents :

yarn swizzle @docusaurus/theme-classic MDXComponents

コピーしますMDXComponents フォルダsrc/themes . 我々がレンダリングしたいと言いましょうButton からmaterial-ui , だから我々は更新する必要がありますindex.js ファイルと追加Button にscope of CodeBlock コンポーネント

// ... imports

+ import Button from "@material-ui/core/Button";

export default {
  code: props => {
    const { children } = props;
    if (typeof children === "string") {
-      return <CodeBlock {...props} />;
+      return <CodeBlock {...props} scope={{ Button }} />;
    }
    return children;
  },

  // ...

};

今、あなたのライブコードブロックではButton ボタンをレンダリングするコンポーネントmaterial-ui :

```jsx live
function MuiButton() {
  return (
    <Button variant="contained" color="primary">
      Primary
    </Button>
  );
}
```

また、パッケージ全体を追加することができますscope しかし、コンポーネントのほとんどを使用していない場合でも、それはあなたのバンドルサイズを増加させるので、私は最適化された輸入を好み、使用されている唯一のコンポーネントを追加したい.

カスタマイズ
コードブロックとコードプレビューのデザイン/実装をカスタマイズするには、テーマを簡単に説明します.

yarn swizzle @docusaurus/theme-live-codeblock Playground

編集によって遊び場の向きを変えましょうsrc/themes/Playground/index.js :

// ...

<LiveProvider
  code={children.replace(/\n$/, "")}
  transformCode={transformCode || (code => `${code};`)}
  theme={theme}
  {...props}
>
  <div className={styles.playgroundPreview}>
    <LivePreview />
    <LiveError />
  </div>
  <div
    className={classnames(
      styles.playgroundHeader,
      styles.playgroundEditorHeader,
    )}
  >
    Live Editor
  </div>
  <LiveEditor />
</LiveProvider>

// ...

あなたが好きなようにこのファイルをカスタマイズすることができます.

注意
DogusaurusチームはSwizzleの使用を推奨しますので、注意して使用してください.

We would like to discourage swizzling of components until we've minimally reached a Beta stage. The components APIs have been changing rapidly and are likely to keep changing until we reach Beta. Stick with the default appearance for now if possible to save yourself some potential pain in future.

記事の一部のドキュメンテーション部分はofficial docs Docusaurusの

そして、ジョニーのおかげでcomment これはコードブロックのスコープに関するより多くの採掘から私を救った.