Code mockup
Code mockup is used to show a block of code in a box that looks like a code editor.
This page is not up to date. Some of the examples might not work as expected.
| Class name | Type | |
|---|---|---|
| mockup-code | Component | Code terminal mockup |
npm i daisyui<div class="$$mockup-code"> <pre data-prefix="$"><code>npm i daisyui</code></pre> </div>
<div class="$$mockup-code">
<pre data-prefix="$"><code>npm i daisyui</code></pre>
</div>
<div class="$$mockup-code">
<pre data-prefix="$"><code>npm i daisyui</code></pre>
</div>
<div class="$$mockup-code">
<pre data-prefix="$"><code>npm i daisyui</code></pre>
</div>npm i daisyuiinstalling...Done!<div class="$$mockup-code"> <pre data-prefix="$"><code>npm i daisyui</code></pre> <pre data-prefix=">" class="text-warning"><code>installing...</code></pre> <pre data-prefix=">" class="text-success"><code>Done!</code></pre> </div>
<div class="$$mockup-code">
<pre data-prefix="$"><code>npm i daisyui</code></pre>
<pre data-prefix=">" class="text-warning"><code>installing...</code></pre>
<pre data-prefix=">" class="text-success"><code>Done!</code></pre>
</div>
<div class="$$mockup-code">
<pre data-prefix="$"><code>npm i daisyui</code></pre>
<pre data-prefix=">" class="text-warning"><code>installing...</code></pre>
<pre data-prefix=">" class="text-success"><code>Done!</code></pre>
</div>
<div class="$$mockup-code">
<pre data-prefix="$"><code>npm i daisyui</code></pre>
<pre data-prefix=">" class="text-warning"><code>installing...</code></pre>
<pre data-prefix=">" class="text-success"><code>Done!</code></pre>
</div>npm i daisyuiinstalling...Error!<div class="$$mockup-code"> <pre data-prefix="1"><code>npm i daisyui</code></pre> <pre data-prefix="2"><code>installing...</code></pre> <pre data-prefix="3" class="bg-warning text-warning-content"><code>Error!</code></pre> </div>
<div class="$$mockup-code">
<pre data-prefix="1"><code>npm i daisyui</code></pre>
<pre data-prefix="2"><code>installing...</code></pre>
<pre data-prefix="3" class="bg-warning text-warning-content"><code>Error!</code></pre>
</div>
<div class="$$mockup-code">
<pre data-prefix="1"><code>npm i daisyui</code></pre>
<pre data-prefix="2"><code>installing...</code></pre>
<pre data-prefix="3" class="bg-warning text-warning-content"><code>Error!</code></pre>
</div>
<div class="$$mockup-code">
<pre data-prefix="1"><code>npm i daisyui</code></pre>
<pre data-prefix="2"><code>installing...</code></pre>
<pre data-prefix="3" class="bg-warning text-warning-content"><code>Error!</code></pre>
</div>Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.<div class="$$mockup-code"> <pre data-prefix="~"><code>Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.</code></pre> </div>
<div class="$$mockup-code">
<pre
data-prefix="~"><code>Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.</code></pre>
</div>
<div class="$$mockup-code">
<pre
data-prefix="~"><code>Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.</code></pre>
</div>
<div class="$$mockup-code">
<pre
data-prefix="~"><code>Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.</code></pre>
</div>without prefix<div class="$$mockup-code"> <pre><code>without prefix</code></pre> </div>
<div class="$$mockup-code">
<pre><code>without prefix</code></pre>
</div>
<div class="$$mockup-code">
<pre><code>without prefix</code></pre>
</div>
<div class="$$mockup-code">
<pre><code>without prefix</code></pre>
</div>can be any color!<div class="$$mockup-code bg-primary text-primary-content"> <pre><code>can be any color!</code></pre> </div>
<div class="$$mockup-code bg-primary text-primary-content">
<pre><code>can be any color!</code></pre>
</div>
<div class="$$mockup-code bg-primary text-primary-content">
<pre><code>can be any color!</code></pre>
</div>
<div class="$$mockup-code bg-primary text-primary-content">
<pre><code>can be any color!</code></pre>
</div>Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
