Mockup Code renders a dark terminal frame for displaying code snippets or command-line output. Each c-lb.mockup-code.line is a row, with optional prefix characters for prompts or line numbers.
Basic Code Mockup
npm i daisyui<c-lb.mockup-code class="w-56">
<pre data-prefix="$" class="nohighlight"><code>npm i daisyui</code></pre>
</c-lb.mockup-code>
Multi-line with Colors
npm i daisyuiinstalling...Done!<c-lb.mockup-code class="w-56">
<pre data-prefix="$" class="nohighlight"><code>npm i daisyui</code></pre>
<pre data-prefix=">" class="nohighlight text-warning"><code>installing...</code></pre>
<pre data-prefix=">" class="nohighlight text-success"><code>Done!</code></pre>
</c-lb.mockup-code>
API Reference
c-lb.mockup-code
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| Slot Name | Description |
|---|---|
| default | Code lines (use <pre data-prefix='$'><code>...</code></pre>) |