TYPOGRAPHY
行内代码与代码块Inline Code & Code Block
浅粉底色的行内代码 + 深色圆角代码块 + 右上角复制按钮。
效果预览
先安装依赖 npm i nova-sdk 再初始化。
复制
import { Nova } from 'nova-sdk'
const nova = new Nova({ key: 'sk_...' })
// 3 行代码，完成接入
nova.track('signup')
适合用在哪
技术文档、开发教程、API 说明、终端风页面。
容易踩的坑
- 代码块可横向滚动却没有 tabindex="0"，键盘用户无法滚动查看溢出内容。
- 复制按钮只在 hover 浮现，触屏设备和键盘用户永远找不到它。
- 语法注释灰色在深底上对比度常低于 4.5:1，长注释几乎无法阅读。
设计提示词 · Prompt
行内代码与代码块（Inline Code & Code Block）：行内代码用等宽字体 + 浅灰/浅粉底（#F1F0F4 或 #FEE2E2 系）+ 2-3px 圆角 + 左右 5px 内边距。代码块：深色底（#0D1117 或 #17171B）+ 圆角 10-14px + 内边距 16-20px + 等宽字体 13-14px + 行高 1.6-1.7 + 语法四色（关键字紫、字符串绿、函数蓝、注释灰）。右上角常驻复制按钮（hover 浮现）。代码横向滚动而非折行，保留行号可选。窗口光晕（顶部渐变描边）是 Linear 风的加成。
Inline Code & Code Block: inline code uses a monospace font + light gray/light pink background (#F1F0F4 or the #FEE2E2 family) + 2-3px radius + 5px horizontal padding. Code block: dark background (#0D1117 or #17171B) + 10-14px radius + 16-20px padding + 13-14px monospace font + line-height 1.6-1.7 + four-color syntax (purple keywords, green strings, blue functions, gray comments). A persistent copy button in the top-right corner (appearing on hover). Code scrolls horizontally rather than wrapping; line numbers optional. A window glow (gradient top border) is a Linear-style bonus.
常见搭配
同一页面里经常和「行内代码与代码块」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-codedemo">
<span>先安装依赖 <span class="d-codeinline">npm i nova-sdk</span> 再初始化。</span>
<div class="d-codeblock">
<span class="d-codeblock__copy">复制</span>
<div><span class="c-k">import</span> { Nova } <span class="c-k">from</span> <span class="c-s">'nova-sdk'</span></div>
<div><span class="c-k">const</span> nova = <span class="c-k">new</span> <span class="c-f">Nova</span>({ key: <span class="c-s">'sk_...'</span> })</div>
<div><span class="c-c">// 3 行代码，完成接入</span></div>
<div>nova.<span class="c-f">track</span>(<span class="c-s">'signup'</span>)</div>
</div>
</div>