如何配置Sandpack仅显示代码（移除实时预览功能）

要实现类似beta.reactjs.org的纯代码展示效果（无实时预览），你需要调整Sandpack的组件选择和配置，以下是两种可行方案：

方案一：使用轻量级的SandpackEditor组件（推荐） #

Sandpack提供了SandpackEditor组件，专门用于仅展示代码的场景，无需加载预览相关资源，性能更优。修改你的组件如下：

import { SandpackEditor } from "@codesandbox/sandpack-react";

function CodeBlock(props) {
  // 提取纯文本代码内容，处理多余空格和换行
  const codeContent = typeof props.children === 'string' ? props.children.trim() : '';
  
  return (
    <div className="m-4">
      <SandpackEditor
        code={codeContent}
        language="jsx" // 根据代码类型设置，如javascript、tsx、html等
        options={{
          readOnly: true,
          showLineNumbers: true, // 可选：是否显示行号
          showInlineErrors: false, // 关闭实时错误提示（无需编译）
          wrapContent: true, // 代码自动换行适配容器
        }}
      />
    </div>
  );
}

export { CodeBlock };

关键配置说明 #

• SandpackEditor：仅渲染代码编辑器，默认无预览面板，完全匹配纯代码展示需求
• language：指定代码语言，确保语法高亮准确
• options：
  • readOnly: true：禁止用户编辑代码
  • showInlineErrors: false：关闭实时编译错误提示，避免不必要的干扰
  • wrapContent: true：让代码自动换行，适配不同宽度的容器

方案二：修改原有Sandpack组件配置 #

如果你坚持使用Sandpack组件，可通过配置隐藏预览面板及多余UI元素：

import { Sandpack } from "@codesandbox/sandpack-react";

function CodeBlock(props) {
  const codeContent = typeof props.children === 'string' ? props.children.trim() : '';
  
  return (
    <div className="m-4">
      <Sandpack
        template="react"
        code={codeContent}
        options={{
          readOnly: true,
          showPreview: false, // 核心：隐藏预览面板
          showNavigator: false, // 隐藏左侧文件导航栏
          showRefreshButton: false, // 隐藏刷新按钮
          editorHeight: 'auto', // 编辑器高度自适应代码内容
        }}
      />
    </div>
  );
}

export { CodeBlock };

关键配置说明 #

• showPreview: false：直接关闭预览面板，仅保留编辑器区域
• showNavigator: false：隐藏文件导航栏，避免多余UI元素
• editorHeight: 'auto'：让编辑器高度随代码内容自动调整，无需固定高度

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