Code Mockup

Div(
    Pre(
        Code("npm i daisyui", cls="[&.hljs]:pl-0 inline-flex items-center"),
        data_prefix="$",
        cls="flex min-w-0 overflow-x-auto h-full items-center"
    ),
    cls="mockup-code"
)
<div class="mockup-code w-full">
  <pre data-prefix="$"><code>npm i daisyui</code></pre>
</div>

Div(
    Pre(
        # overwrite the hljs class padding rule (pre code.hljs { padding: 1em }) using matching specificity
        Code('without prefix', cls='[&.hljs]:p-0 language-bash inline-flex items-center'),
        cls='flex min-w-0 overflow-x-auto h-full items-center'
    ),
    cls='mockup-code'
)

Div(
    # styling is built into our hljs code blocks so we can override it with matching specificity
    Pre(
        Code('npm i daisyui', cls="[&.hljs]:pl-0 language-bash inline-flex items-center"),
        data_prefix='$',
        cls="flex min-w-0 overflow-x-auto h-full items-center"
    ),
    Pre(
        Code('installing...', cls="[&.hljs]:pl-0 [&.hljs]:text-warning inline-flex items-center"),
        data_prefix='>',
        cls="text-warning flex min-w-0 overflow-x-auto h-full items-center"
    ),
    Pre(
        Code('Done!', cls="[&.hljs]:pl-0 [&.hljs]:text-success inline-flex items-center"),
        data_prefix='>',
        cls="text-success flex min-w-0 overflow-x-auto h-full items-center"
    ),
    cls='mockup-code'
)

Div(
    Pre(
        Code('npm i daisyui', cls="[&.hljs]:pl-0 language-bash inline-flex items-center"),
        data_prefix='1',
        cls="flex min-w-0 overflow-x-auto h-full items-center"
    ),
    Pre(
        Code('installing...', cls="[&.hljs]:pl-0 inline-flex items-center"),
        data_prefix='2',
        cls="flex min-w-0 overflow-x-auto h-full items-center"
    ),
    Pre(
        Code('Error!', cls="[&.hljs]:pl-0 [&.hljs]:bg-transparent [&.hljs-title]:text-warning-content inline-flex items-center"),
        data_prefix='3',
        cls='bg-warning text-warning-content flex min-w-0 overflow-x-auto h-full items-center'
    ),
    cls='mockup-code'
)

Div(
    Pre(
        Code('Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.',
                cls="[&.hljs]:pl-0 inline-flex items-center"),
        data_prefix='~',
        cls="flex min-w-0 overflow-x-auto h-full items-center"
    ),
    cls='mockup-code'
)

Div(
    Pre(
        # styling is built into our hljs code blocks so we can override it with matching specificity
        Code('can be any color!',
                cls='[&.hljs]:bg-transparent [&.hljs]:text-primary-content [&.hljs-comment]:text-secondary [&.hljs]:p-0 language-bash inline-flex items-center'),
        cls='flex min-w-0 overflow-x-auto h-full items-center'
    ),
    cls='mockup-code bg-primary text-primary-content'
)