Code Block new 代码块 Code Block web
A readable code sample with context, copy, and line-level structure
带有上下文、复制功能和逐行结构的可读代码示例
1export function StatusBadge({ state }) {
2 return (
3 <span data-state={state}>
4 {state === "ready" ? "Ready" : "Working"}
5 </span>
6 );
7}标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Code context bar代码上下文栏
language labelThe small header that tells readers what they are looking at and offers actions.
告诉读者语言和用途，并提供操作的紧凑页眉。
Prompt fragmentPrompt 片段a compact header with the language name and a copy button aligned to the top right
紧凑页眉左侧放语言名，右上角对齐复制按钮
-
2 Code source代码源文
pre > codeThe preserved source text with indentation and line breaks intact.
保留缩进和换行的源文本。
Prompt fragmentPrompt 片段a pre/code region with tab-size 2, selectable text, and horizontal overflow contained locally
使用 tab-size:2 的 pre/code 区域，可选中文本，横向溢出只在本地滚动
-
3 Copy feedback复制反馈
role=statusThe short confirmation that tells users the source is now on the clipboard.
告诉用户源代码已经进入剪贴板的短确认。
Prompt fragmentPrompt 片段a polite status message that changes to Copied for 1.5 seconds without shifting the code
使用 polite status 显示 Copied 1.5 秒，不推动代码布局
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a code block with a language label, optional line numbers, a copy button, horizontal overflow that stays inside the sample, and syntax highlighting that never reduces contrast. Keep the source in a real pre/code structure, copy plain source text, announce Copied in a status region, preserve keyboard focus, and provide a readable light fallback.
构建一个代码块，包含语言标签、可选行号、复制按钮、只在代码区域内滚动的横向溢出，以及不降低对比度的语法高亮。使用真实的 pre/code 结构；复制纯源文本；在 status 区域播报 Copied；保留键盘焦点；提供可读的浅色回退方案。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my code block. Check that copying returns plain source rather than rendered HTML; long lines scroll inside the block; line numbers do not get copied; the language label is associated with the sample; the copy button has a visible focus ring and reset feedback; keyboard users can reach the whole block; and highlighting never hides meaning when color is unavailable. The symptom:
调试我的代码块。检查：复制得到的是纯源代码而不是渲染后的 HTML；长行在代码块内部滚动；行号不会被复制；语言标签是否关联到示例；复制按钮是否有明显焦点环并能重置反馈；键盘用户能否完整操作；没有颜色时高亮是否仍不隐藏含义。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | pre > code | preserve whitespace and expose code as text保留空白，并把代码作为文本暴露 |
| Clipboard | navigator.clipboard.writeText | copy the source rather than highlighted markup复制源代码，而不是复制高亮后的标记 |
| ARIA | aria-label + status | name the language and announce copy feedback标明语言并播报复制反馈 |
| CSS | tab-size + overflow | keep indentation readable without breaking the page保持缩进可读，同时不让长行撑破页面 |