6 posts tagged with "Docusaurus" | 算法在实际引用中的最佳实践

在 Docusaurus MDX 中使用 ReactLive 的案例

August 19, 2025 · 3 min read

Front End Engineer

你可以在 Docusaurus 的 MDX 文件中这样使用 ReactLive 组件，实现代码片段和运行结果的互动演示。

官方文档 https://nearform.com/open-source/react-live/docs/

先实现代码

import React from 'react';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';

type ReactLiveDemoProps = {
  code: string;
  liveProps?: React.ComponentProps<typeof LiveProvider>;
};

export default function ReactLiveDemo({ code, liveProps = {} }: ReactLiveDemoProps) {
  return (
    <LiveProvider code={code} {...liveProps}>
      <LiveEditor />
      <LiveError />
      <div>
        <strong>输出结果：</strong>
        <LivePreview />
      </div>
    </LiveProvider>
  );
}

下面分别演示了几个不同场景：

场景一：基础累加

import ReactLiveDemo from "./ReactLiveDemo";

export default function Demo() {
  let code = `function App() {
  function add(...args: number[]) {
    return args.reduce((a, b) => a + b, 0);
  }
  return (<div>{add(1, 2, 3)}</div>)
}`

  return (
    <ReactLiveDemo
      code={code}
      liveProps={{
        language: "ts",
        noInline: false,
        typescript: true,
      }}
    />
  );
}

预览

function App() {
  function add(...args: number[]) {
    return args.reduce((a, b) => a + b, 0);
  }
  return (<div>{add(1, 2, 3)}</div>)
}

输出结果：

场景二：链式调用

import { ReactLiveDemo } from "./ReactLive";

export default function Demo() {
  let code = `
    function App() {
      function add(...args: number[]) {
        let sum = Array.isArray(args) ? args.reduce((a, b) => a + b, 0) : 0;
        function inner(...next: number[]) {
          sum += Array.isArray(next) ? next.reduce((a, b) => a + b, 0) : 0;
          return inner;
        }
        inner.valueOf = () => sum;
        inner.toString = () => sum.toString();
        return inner;
      }
      return (<div>{+add(1)(2)(3)}</div>);
    }
  `

  return (
    <ReactLiveDemo
      code={code}
      liveProps={{
        language: "ts",
        noInline: false,
        typescript: true,
      }}
    />
  );
}

预览


    function App() {
      function add(...args: number[]) {
        let sum = Array.isArray(args) ? args.reduce((a, b) => a + b, 0) : 0;
        function inner(...next: number[]) {
          sum += Array.isArray(next) ? next.reduce((a, b) => a + b, 0) : 0;
          return inner;
        }
        inner.valueOf = () => sum;
        inner.toString = () => sum.toString();
        return inner;
      }
      return (<div>{+add(1)(2)(3)}</div>);
    }

输出结果：

场景三：多参数混合调用

import { ReactLiveDemo } from "./ReactLive";

export default function Demo() {
  let code = `
    function App() {
      function add(...args: number[]) {
        let sum = Array.isArray(args) ? args.reduce((a, b) => a + b, 0) : 0;
        function inner(...next: number[]) {
          sum += Array.isArray(next) ? next.reduce((a, b) => a + b, 0) : 0;
          return inner;
        }
        inner.valueOf = () => sum;
        inner.toString = () => sum.toString();
        return inner;
      }
      return <div>{+add(1, 2)(3)}</div>;
    }
  `

  return (
    <ReactLiveDemo
      code={code}
      liveProps={{
        language: "ts",
        noInline: false,
        typescript: true,
      }}
    />
  );
}

预览


    function App() {
      function add(...args: number[]) {
        let sum = Array.isArray(args) ? args.reduce((a, b) => a + b, 0) : 0;
        function inner(...next: number[]) {
          sum += Array.isArray(next) ? next.reduce((a, b) => a + b, 0) : 0;
          return inner;
        }
        inner.valueOf = () => sum;
        inner.toString = () => sum.toString();
        return inner;
      }
      return <div>{+add(1, 2)(3)}</div>;
    }

输出结果：

场景四：编辑器主题和配置自定义

你可以通过 liveProps 传递更多参数，定制编辑器行为，例如设置只读、不同的主题、是否内联运行等：

<ReactLiveDemo
  code={`const hello: string = "Hello, Docusaurus!";
<div>{hello}</div>`}
  liveProps={{
    language: "ts",
    theme: { plain: { backgroundColor: "#222", color: "#fff" } },
    disabled: true
  }}
/>

场景五：只展示代码（不运行）

如果只想展示代码，不显示运行结果，可以通过在外层自定义隐藏 LivePreview：

<ReactLiveDemo
  code={`function foo() { return "bar"; }`}
  liveProps={{
    language: "ts",
    noInline: false,
    theme: { plain: { backgroundColor: "#fafafa" } }
  }}
/>

使用vue组件

July 8, 2025 · One min read

陈碧滔

Front End Engineer

Blog posts support Docusaurus Markdown features, such as MDX.

tip

使用vue组件

// 引入转换包

import { uvc } from 'use-vue-component';

// 引入vue组件

import test from '@site/src/components/vue/test.vue';

// 转换

export const HelloWorld = uvc(test);

<HelloWorld />

// 引入vue组件

import hello from '@site/src/components/vue/hello.vue';

// 转换

export const Hello = uvc(hello);

// 传参
<Hello name="john" />