Mockup Code

A terminal / code block mockup with gutter prefix labels. Wraps a <div class="mockup-code">. Each line is a <pre data-prefix="..."><code> element.

Single command

Use data-prefix="$" on a <pre> to show a shell prompt.

npm install daisyui

Multi-line with output

Mix prompt lines and numbered output lines. Use any string as data-prefix.

git status

On branch main

nothing to commit, working tree clean

Highlighted line

Add class="bg-warning text-warning-content" (or any bg/text pair) to a <pre> to highlight that line.

import {neokit} from '@ppreeper/neokit'

// deprecated API call below

neokit.oldMethod()

Error line

Use class="bg-error text-error-content" for error output.

npm run build

Error: Cannot find module './missing'

Without prefix

Omit data-prefix to show no gutter label on that line.

const greeting = "Hello, world!"

console.log(greeting)

Custom background

Pass a bg utility via classes to change the terminal color scheme.

echo "styled terminal"

styled terminal