企业官网建设流程全解析

daisyUI Code Mockup 组件完全指南：用 mockup-code 打造代码编辑器风格展示框

【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui

mockup-code是 daisyUI 提供的一种展示型组件，它把代码块放进一个形似代码编辑器/终端窗口的容器中，用于文档站、教程页或产品演示里优雅地呈现命令行操作与代码片段。读完本文，你将掌握mockup-code的完整语法、data-prefix行前缀机制、单行高亮技巧，以及它在 daisyUI 源码 层面的实现原理，并顺带了解同系列mockup-window、mockup-browser、mockup-phone的用法差异。

一、组件定位与适用场景

在 skills/daisyui/components/mockup-code.md 中，官方将 Code mockup 描述为"用代码编辑器的样式在一个盒子里展示代码"。它非常适合以下场景：

• 安装命令展示（如npm i daisyui）
• 教程中的代码片段与执行输出
• CLI 工具演示（终端风格的命令输入与回显）
• 文档中需要强调"这是一段可执行/可复制代码"的场景

mockup-code与同系列组件（mockup-window、mockup-browser、mockup-phone）共同构成了 daisyUI 的 mockup 家族，但mockup-code是唯一专注于"代码/终端"表现的成员。其默认样式为深色neutral背景 +neutral-content文字，顶部还会渲染三个圆点，模拟 macOS 风格窗口的最小化/最大化/关闭按钮。

二、安装与引入前提

mockup-code是 daisyUI 内置组件，无需额外安装独立包。按 skills/daisyui/install/SKILL.md 的说明，daisyUI 5 需要配合 Tailwind CSS 4 使用：

1. 安装依赖：npm i -D daisyui@latest
2. 在 CSS 入口文件中引入 Tailwind 与 daisyUI 插件：

@import "tailwindcss"; @plugin "daisyui";

在 Tailwind CSS v4 中，旧的tailwind.config.js已弃用，@plugin "daisyui";指令会注册 daisyUI 的全部组件（含.mockup-code）与主题变量。若希望快速体验而不搭建构建环境，也可以使用 CDN 方式引入预编译 CSS（见 安装指南 中的 CDN 段落），但生产环境仍建议作为依赖安装。

三、核心类名与基础语法

根据 skills/daisyui/components/mockup-code.md，mockup-code组件只有一个核心类名：

最基础的语法结构是：外层div.mockup-code内嵌套<pre>与<code>：

<div class="mockup-code"> <pre><div class="mockup-code w-full"> <pre><div class="mockup-code w-full"> <pre><div class="mockup-code w-full"> <pre><div class="mockup-code w-full"> <pre><code>without prefix</code></pre> </div>

此时pre:before会退化为空的占位伪元素（源码中content: ""配合margin-right: 2ch），行首仍然保留一个字符宽的缩进，视觉上整齐统一。

五、代码语法高亮与行高亮

5.1 语法高亮依赖第三方库

文档明确给出规则：

使用<code>标签来添加代码语法高亮。这个功能需要另一个库来实现。

也就是说，daisyUI 本身不提供语法着色，<code>标签只是为高亮库（如 Prism、Highlight.js、Shiki 等）提供标准的语义化挂载点。你可以任选一款你熟悉的高亮库，在其初始化逻辑中定位mockup-code容器内的<code>元素并应用高亮主题即可。mockup-code深色的neutral背景适合配合深色系高亮主题。

5.2 行级高亮：叠加背景色与文字色

文档规则第三点：

为了让某一行易于查看，可以给它添加背景颜色或文字颜色。

由于mockup-code基于 Tailwind 工具类体系，任何行都可以通过追加颜色类实现强调。官方文档 "Highlighted line" 示例用行号前缀模拟"第 3 行报错"：

<div class="mockup-code w-full"> <pre><div class="mockup-code bg-primary text-primary-content w-full"> <pre><code>can be any color!</code></pre> </div>

容器本身使用@apply bg-neutral text-neutral-content作为默认色，但 Tailwind 的工具类优先级允许你在 HTML 上覆盖这些默认值，从而让代码框融入页面主色调。

六、长行滚动与源码实现原理

mockup-code对超长代码行采用"容器内横向滚动"策略。官方文档的 "Long line will scroll" 示例展示了这一点：当代码行超出容器宽度时，不会换行破坏缩进，而是在容器内产生水平滚动条。

从 packages/daisyui/src/components/mockup.css 的源码可以看清整套实现（第 1–35 行）：

.mockup-code { @layer daisyui.l1.l2.l3 { @apply bg-neutral text-neutral-content rounded-box relative overflow-hidden overflow-x-auto py-5; font-size: 0.875rem; direction: ltr; &:before { content: ""; @apply mb-4 block h-3 w-3 rounded-full opacity-30; box-shadow: 1.4em 0, 2.8em 0, 4.2em 0; } pre { @apply pr-5; width: max-content; min-width: 100%; &:before { content: ""; margin-right: 2ch; } &[data-prefix] { &:before { --tw-content: attr(data-prefix); content: var(--tw-content); @apply inline-block w-8 text-right opacity-50; } } } } }

逐段拆解其中的设计决策：

• 窗口圆点：容器&:before伪元素绘制一个h-3 w-3的圆点，并通过box-shadow在水平方向 1.4em、2.8em、4.2em 处复制出另外两个圆点，形成经典的三按钮装饰，opacity-30使其低调不抢内容。
• 横向滚动：overflow-hidden overflow-x-auto组合隐藏纵向溢出、允许横向滚动；pre设置为width: max-content; min-width: 100%，使每一行按内容固有宽度排布，短行仍能撑满容器背景，长行则触发滚动条。
• 前缀注入：&[data-prefix]:before通过--tw-content: attr(data-prefix)读取 HTML 属性作为伪元素内容，w-8（2rem）定宽、text-right右对齐、opacity-50半透明，让不同长度的前缀在视觉上左对齐成一列。
• LTR 强制：direction: ltr保证代码内容在 RTL 页面中依然按从左到右的代码阅读习惯渲染，不会因语言方向设置破坏缩进与对齐。
• CSS 分层：样式包裹在@layer daisyui.l1.l2.l3中，这是 daisyUI 5 的级联层策略，使组件样式具备可预测的优先级，便于被 Tailwind 工具类覆盖。

另外值得注意的是，pre的&:before在没有data-prefix时仍会生成content: ""的空伪元素并带margin-right: 2ch，这正是"无前缀行也保持整齐缩进"的实现细节。

七、与同系列 mockup 组件的对比与组合

mockup-code并非孤立的展示框，daisyUI 还提供了三个同族组件，可根据场景选用：

• Window mockup（skills/daisyui/components/mockup-window.md）：操作系统窗口风格的盒子，语法为<div class="mockup-window"><div>{CONTENT}</div></div>，适合展示应用界面截图或"窗口内"的内容区块。
• Browser mockup（skills/daisyui/components/mockup-browser.md）：浏览器窗口风格，由mockup-browser+mockup-browser-toolbar两部分组成，工具栏内可用<div class="input">放置地址栏 URL，适合做站点/落地页演示。
• Phone mockup（见 mockup.css 第 105–151 行的mockup-phone/mockup-phone-camera/mockup-phone-display）：手机外形，适合移动端界面预览。

这四者在 packages/daisyui/src/components/mockup.css 中统一维护，共享rounded-box、overflow-hidden、三圆点装饰（mockup-browser与mockup-phone均有各自的圆点实现）等设计语言。其中mockup-window与mockup-browser同样支持pre[data-prefix]前缀伪元素（见源码第 53–59 行、67–73 行），即你完全可以在浏览器/窗口 mockup 内部嵌套带data-prefix的代码行，组合出"浏览器窗口里显示一段命令"的复合效果。

八、完整可运行示例

将以上知识点汇总，一个"终端安装 + 输出 + 报错高亮 + 语法高亮挂载点"的完整示例：

<div class="mockup-code w-full"> <pre contenteditable="false">【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui