返回赛题列表
代码剪贴板
入门一个带语法高亮和行号的代码展示网页，方便 Edge Copilot / Chrome Gemini 等浏览器 AI 助手直接读取代码内容，充当本地代码与 AI 之间的桥梁。
规则说明▼
phase1：要求模型根据提示词直接输出HTML文件
phase2 step1：在新的对话窗口，要求模型自行撰写PRD
phase2 step2：在同一个对话窗口，要求模型根据自己生成的PRD输出HTML文件
Prompt▼
phase1：▼
制作一个单文件 HTML 代码剪贴板工具，核心用途是将代码粘贴到网页上，让 Edge Copilot、Chrome Gemini 等浏览器内置 AI 助手能直接读取网页内容来理解代码。
功能要求：
1. 代码输入区：支持粘贴或手动输入代码，提供一个大面积的文本编辑区域
2. 语法高亮渲染：在预览区域对代码进行语法高亮展示（可内嵌轻量高亮库如 Highlight.js CDN，或自行实现基础高亮）
3. 行号显示：预览时显示行号，方便 AI 助手按行引用
4. 语言选择：提供常见编程语言的下拉选择（如 JavaScript、Python、HTML、CSS、TypeScript、Go、Rust 等），自动切换高亮规则
5. 一键复制：点击按钮可复制代码到剪贴板
6. 多代码片段支持：可同时添加多个代码片段，每个片段可独立设置语言和标题，方便一次性展示多个相关文件
7. 清晰的语义化 HTML 结构：确保代码内容以浏览器 AI 助手最容易解析的方式呈现在 DOM 中（使用 `<pre><code>` 等语义标签）
设计要求：
- 整体风格干净现代，深色主题为主（类似 VS Code / GitHub Dark 风格）
- 无广告、无干扰，纯粹聚焦于代码展示
- 响应式布局，桌面端和移动端均可用
phase2(2 steps)▼
phase2 step1：▼
以下是一个设计需求：
"制作一个单文件 HTML 代码剪贴板工具，核心用途是将代码粘贴到网页上，让 Edge Copilot、Chrome Gemini 等浏览器内置 AI 助手能直接读取网页内容来理解代码。需要支持语法高亮、行号显示、语言选择、多片段管理和语义化 HTML 结构。"
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
phase2 step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS 和 JS）。要求完美还原 PRD 中描述的所有功能与视觉设计。