code-editor.tsx

code-editor.tsx

概述

基于 Monaco Editor 的代码编辑器组件，为书籍内容提供语法高亮、代码展示和复制功能。支持主题自适应和多种编程语言。

组件

CodeEditor

功能完整的代码编辑器展示组件。

Props：

属性类型必填默认值描述
codestring是-要显示的代码内容
languagestring是-编程语言（如 "typescript", "python", "json"）
filenamestring否-文件名（显示在标题栏）

功能特性：

  1. 语法高亮

- 基于 Monaco Editor - 支持多种编程语言 - 主题自适应（亮色/暗色）

  1. 标题栏

- 三色圆点（仿 Mac 窗口风格） - 文件名显示 - 语言标识 - 复制按钮

  1. 复制功能

- 一键复制代码到剪贴板 - 复制成功视觉反馈（2秒）

  1. 主题自适应

- 自动检测系统主题 - 监听主题变化（MutationObserver） - 暗色：vs-dark 主题 + 深色背景 - 亮色：light 主题 + 白色背景

  1. 智能高度

- 根据代码行数自动计算高度 - 最小高度保证 - 最大高度限制（400px） - 隐藏垂直滚动条

使用示例：

import { CodeEditor } from "@/components/book/elements/code-editor";

// TypeScript 示例
<CodeEditor
  language="typescript"
  filename="types.ts"
  code={`interface User {
  id: string;
  name: string;
  email: string;
}`}
/>

// Python 示例
<CodeEditor
  language="python"
  filename="example.py"
  code={`def greet(name: str) -> str:
    return f"Hello, {name}!"`}
/>

// JSON 示例
<CodeEditor
  language="json"
  code={JSON.stringify({ name: "AI", version: "1.0" }, null, 2)}
/>

Monaco Editor 配置

{
  readOnly: true,                    // 只读模式
  minimap: { enabled: false },       // 禁用缩略图
  scrollBeyondLastLine: false,       // 不滚动超过最后一行
  fontSize: 13,                      // 字体大小
  lineNumbers: "off",                // 关闭行号
  folding: false,                    // 关闭代码折叠
  lineDecorationsWidth: 12,          // 行装饰宽度
  lineNumbersMinChars: 0,            // 行号最小字符
  renderLineHighlight: "none",       // 不高亮当前行
  scrollbar: { 
    vertical: "hidden",              // 隐藏垂直滚动条
    horizontal: "auto"               // 自动水平滚动条
  },
  overviewRulerLanes: 0,             // 概览标尺通道
  hideCursorInOverviewRuler: true,   // 隐藏光标
  overviewRulerBorder: false,        // 隐藏概览标尺边框
  contextmenu: false,                // 禁用右键菜单
  padding: { top: 12, bottom: 12 },  // 内边距
}

主题配色

暗色主题

元素颜色值
容器背景#1e1e1e
标题栏背景#252526
标题栏边框#3c3c3c
按钮背景#3c3c3c
按钮文字#cccccc
语言标签#6e6e6e

亮色主题

元素颜色值
容器背景#ffffff
标题栏背景#f3f3f3
标题栏边框#e0e0e0
按钮背景#e0e0e0
按钮文字#333333
语言标签#999999

依赖

依赖用途
@monaco-editor/reactMonaco Editor React 封装
react - useState, useEffect状态和生命周期
lucide-react - Copy, Check复制图标
@/lib/utils - cn类名合并

注意事项

  1. 动态导入 - Monaco Editor 是动态加载的，首次渲染可能有延迟
  2. SSR 兼容 - 组件使用 "use client" 指令，避免服务端渲染问题
  3. 语言支持 - 确保 Monaco Editor 支持所需语言（常用语言已内置）
  4. 性能考虑 - 大文件渲染时注意性能影响
← 返回目录