daisyUI Code Mockup 组件完全指南用 mockup-code 打造代码编辑器风格展示框【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuimockup-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 使用安装依赖npm i -D daisyuilatest在 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.mdmockup-code组件只有一个核心类名类型类名说明componentmockup-code代码编辑器风格的展示容器最基础的语法结构是外层div.mockup-code内嵌套pre与codediv classmockup-code pre>div classmockup-code w-full pre>div classmockup-code w-full pre>div classmockup-code w-full pre>div classmockup-code w-full precodewithout 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 classmockup-code w-full pre>div classmockup-code bg-primary text-primary-content w-full precodecan 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-82rem定宽、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 mockupskills/daisyui/components/mockup-window.md操作系统窗口风格的盒子语法为div classmockup-windowdiv{CONTENT}/div/div适合展示应用界面截图或窗口内的内容区块。Browser mockupskills/daisyui/components/mockup-browser.md浏览器窗口风格由mockup-browsermockup-browser-toolbar两部分组成工具栏内可用div classinput放置地址栏 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 classmockup-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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考