如何在Docusaurus v2站点实现官方Playground页同款卡片组件

• 第一步：安装官方维护的交互式代码块主题依赖
  官方Playground页面的卡片没有使用私有组件，核心能力来自官方公开维护的@docusaurus/theme-live-codeblock包，直接安装对应依赖即可：

  npm install @docusaurus/theme-live-codeblock
  # 如果你用yarn
  yarn add @docusaurus/theme-live-codeblock
  

• 第二步：修改站点配置注册主题
  打开根目录下的docusaurus.config.js文件，将主题加入themes配置项，同时对齐官方Playground的默认布局参数：

  // docusaurus.config.js
  module.exports = {
    // 其余原有配置保持不变
    themes: ['@docusaurus/theme-live-codeblock'],
    themeConfig: {
      // 其余原有themeConfig配置保持不变
      liveCodeBlock: {
        // 预览区固定在代码编辑器下方，和官方布局一致
        playgroundPosition: 'bottom',
      },
    },
  };
  

• 第三步：在文档中使用卡片语法
  配置完成后，在任意MDX/Markdown文档中，给jsx/tsx代码块添加live标记，即可渲染出和官方完全一致的交互式卡片：

  function DemoCard() {
    const [count, setCount] = useState(0);
    return (
      <div style={{ padding: "1.5rem" }}>
        <button 
          style={{ padding: "0.5rem 1rem", cursor: "pointer" }}
          onClick={() => setCount(prev => prev + 1)}
        >
          点击计数：{count}
        </button>
      </div>
    );
  }
  

  卡片自带的代码复制、重置、编辑器/预览区切换功能和官方完全一致，不需要额外开发。React、useState等常用API会自动注入，不需要手动写import语句。
• 第四步（可选）：样式细节对齐
  如果你站点自定义过全局圆角、阴影变量，导致卡片视觉和官方有差异，可以在src/css/custom.css中追加以下样式对齐：

  .theme-live-code-block-wrapper {
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    margin: 2rem 0;
    overflow: hidden;
  }
  
  .playgroundHeader {
    background-color: var(--ifm-color-emphasis-100);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
  }
  

• 验证效果
  本地启动开发服务npm run start，进入对应文档页即可看到和官方Playground完全一致的卡片效果。如果需要给卡片增加自定义作用域、支持导入自己的业务组件，可以对应扩展主题的scope配置参数即可。

注意：请确保你的Docusaurus v2版本在2.4.0及以上，低版本的live-codeblock主题样式和交互和当前官网版本存在差异，升级依赖即可对齐效果。

内容的提问来源于stack exchange，提问作者Rudra Sen