代码展示组件

制作一个代码展示组件，类似于技术博客中的代码块，但有更强的设计感和个性。 要求：支持语法高亮（可以手动染色，不允许接入真实的高亮库），展示三段约 30 行的示例代码（内容随意，需要是三种不同的编程语言），有行号，有文件名标签，有复制按钮。 整体配色方案要有自己的美学主张——不要照抄任何现有主题，而是设计一套你认为美观且易读的配色。浅色和深色模式都需要美观。 请输出完整的 HTML。

制作一个代码展示组件，类似技术博客或文档站里出现的代码块，但有更强的设计感和个性。整页围绕代码块展开（外加少量介绍页面元素），让代码块本身成为主角。 **展示内容（请自行编写示例代码，不要使用现成开源项目里的整段拷贝）** 需要你**自己撰写 3 段不同编程语言的示例代码**，让评测者通过同一套主题在不同语言下的表现来判断这套配色的设计能力。 - **语言数量**：恰好 3 段，覆盖 3 种气质迥异的语言。建议从如下池子里挑选 3 种风格不同的搭配（例如"脚本动态语言 + 强类型系统语言 + 样式 / 标记语言"）：JavaScript / TypeScript、Python、Rust、Go、Ruby、Swift、Kotlin、Java、C++、Haskell、Elixir、SQL、CSS / SCSS、HTML / JSX、Shell、TOML / YAML（标记类只能算 3 段中的 1 段，不能 3 段都是配置语言） - **每段代码长度**：20–40 行，必须是**有真实语义的代码**——可以是工具函数、算法实现、配置示例、组件片段、数据模型定义等。**不允许**用 `fizzbuzz` / `hello world` / 纯 lorem 注释 / `foo bar baz` 这类凑字数的伪代码 - **文件名**：每段代码顶部显示一个符合该语言习惯的文件名（如 `parser.ts` / `quicksort.py` / `theme.module.css` / `cache.rs`） - **token 覆盖度**：每段代码内部必须出现尽量多的 token 类别——至少要包含**关键字、字符串字面量、数字字面量、行注释、函数定义与调用、变量声明、操作符**这几类；建议有意设计代码内容以涵盖更多类别（详见下方 token 分类要求） - **跨语言一致性**：3 段代码必须**共用同一套主题与同一套 token 颜色映射**（例如所有语言的"关键字"都用同一种关键字色，所有语言的"字符串"都用同一种字符串色），不能给每种语言单独配色 页面上以 **Tab 切换** 或 **垂直堆叠** 的方式展示这 3 段代码均可，但视觉风格必须统一，让人一眼看出这是同一套主题在不同语言下的表现。 **功能要求** 1. **完整代码块**：以等宽字体展示代码，所有空白与缩进保留原样 2. **行号**：左侧显示行号（从 1 开始），与代码本体应当有清晰但低调的视觉分隔 3. **文件名标签**：显示在每段代码块顶部 / 顶部左侧，标签设计本身要有质感（不是默认灰底白字），可以附带语言标识 / 小图标 4. **复制按钮**：位于每段代码块右上角，点击后能真的把当前这段代码复制到剪贴板（使用 `navigator.clipboard.writeText`），并有"已复制"的视觉反馈（如按钮文字 / 图标短暂切换 200–1500ms 后恢复） 5. **浅色 / 深色主题切换**：必须同时实现两套主题，提供切换按钮；两套主题都要好看，缺一不可 6. **语法高亮**：手动染色即可（不允许接入 highlight.js / Prism 等库）。 **语法 token 分类要求（至少要为以下 9 类设计独立的颜色；具体出现哪些类别取决于你选的语言，但 9 类整体必须可见）** 1. **关键字**（语言级保留字：`function` / `def` / `fn` / `class` / `if` / `else` / `return` / `null` / `None` / `true` / `false` / `import` / `export` / `let` / `const` / `pub` 等） 2. **字符串字面量**（单 / 双引号、模板字符串、原始字符串、多行字符串等——3 段代码里至少要出现 2 种字符串形式） 3. **数字字面量**（整数、浮点、十六进制等） 4. **注释**（行注释 + 块注释 / 文档注释；3 段代码里至少要出现 2 种注释形式） 5. **函数名 / 函数定义名 / 函数调用**（声明处与调用处可以同色，也可以微妙区分） 6. **类名 / 类型名 / 内置类型**（如 TypeScript 的类型注解、Python 的 class、Rust 的 struct / enum、Go 的 type 等） 7. **变量名 / 普通标识符** 8. **操作符与标点**（`=` / `=>` / `->` / `::` / `&&` / `?.` / `...` 等） 9. **属性访问 / 对象 key / 装饰器 / selector**（包括对象字段、CSS 属性、Python `@decorator`、Rust `#[derive]`、HTML 标签 / 属性等中的至少一类） 加分类（不强制，但能拉开档次）：泛型 / 生命周期尖括号、模板插值 `${}`、宏（`println!` / `derive`）、正则字面量、JSX 标签、CSS 伪类 / 媒体查询、SQL 关键字与表名等。 **配色硬约束（题眼，不允许违反）** 1. **不允许照抄任何现有著名主题**——具体禁止参考的有：Dracula、One Dark / One Light、Monokai / Monokai Pro、Solarized（含 Light / Dark）、Nord、Gruvbox、Tokyo Night、GitHub Light / Dark、VS Code Default Dark / Light、Material、Atom One、Cobalt、Night Owl、Catppuccin、Rose Pine 2. 你必须设计一套**有自己美学主张**的原创配色——可以从某种自然现象 / 材质 / 时代风格 / 文化意象出发（比如"夕阳沙漠 / 雨后竹林 / 老式打字机 / 80 年代杂志 / 矿石矿物 / 深海发光生物"），但最终的色板必须是经过你的色彩判断挑选出来的 3. 必须给出**一组浅色和一组深色**——不是浅色把深色反一下颜色，而是两套都各自经过设计 4. **可读性硬指标**：所有 token 与背景的对比度必须满足 WCAG AA（正常文本 ≥ 4.5:1）；不允许出现"看着好看但读不清"的低对比度配色 5. **token 之间应当层次清晰**：注释（最弱）/ 标点（中弱）/ 变量与字符串（中）/ 关键字与函数（强） **整体页面结构** - 页面顶部：少量介绍文字（一句话 + 主题切换按钮），介绍代码块的"主题名"是什么（你自己起的名字） - 页面中央：3 段代码块本体（Tab 切换或垂直堆叠均可），占据视觉重心 - 页面底部（可选）：极简的色板展示——把这套主题的核心色块展示出来，每块下面标注它对应哪类 token（这是给评测看的，不要太抢戏） - 整页本身的背景、文字、按钮等也应当是这套主题色的延伸，让整页就是一个"主题展厅" **整体气质** - 一份"被设计过"的代码块——既不是 Bootstrap 默认 `<pre><code>`，也不是 GitHub 风格的安全克制——它应当让看到的开发者愿意问"这是什么主题，能给我吗" - 浅色不一定是白底，可以是奶油 / 米色 / 浅蓝灰 / 浅绿；深色不一定是深蓝深紫，可以是墨绿 / 深棕 / 深红等任何"不黑"的暗调 - 整页应当让人感受到模型有自己的色彩判断，而不是套了通用模板 **技术要求** - 输出一个完整可运行的单文件 HTML，所有 CSS / JS 内联或走 CDN，不依赖任何本地资源 - 适配桌面端（≥ 1280×800）和手机端 - 浅色 / 深色切换通过点击按钮实现 - 复制功能必须真实可用（`navigator.clipboard`） - 语法高亮必须手动染色，禁止使用 highlight.js / Prism 等 CDN 库 - 等宽字体建议从 Google Fonts 中挑选（不要用系统默认 Courier） 请输出完整的单文件 HTML。