Code - Beautify Demo

Inline code highlighting utilities for <code> tags with dynamic theme support.

Notes

Default inline code style uses a subtle background (bg-hover). No variant class needed.
Prefer combined utilities like code-solid-primary over separate code-solid code-primary — smaller CSS output.
Use <pre><code> for multi-line code blocks — <pre> preserves formatting, <code> marks semantics.

Basic usage

Inline code (default subtle style)

Variable declaration: const x = 10;

Function call: getData()

File path: /usr/local/bin/node

Install: npm install beautify

Code in paragraph text

Run npm install in your terminal to install dependencies.

Use git commit -m "message" to commit changes.

Config file is at ~/.config/beautify/config.json.

Visual variants

code-plain

Removes background, padding and border-radius. Uses current text color.

code-plain — no background

code-muted

Subtle semi-transparent border with background.

code-muted — light border

code-outline

Solid border matching the theme color.

code-outline — solid border

code-solid

Solid filled background with white text.

code-solid — dark background

Theme colors

Primary / Secondary / Tertiary

primary — theme primary

secondary — theme secondary

tertiary — theme tertiary

Status colors

success — success state

error — error state

info — info state

warning — warning state

caution — caution state

Highlight / Ink

highlight — highlight emphasis

ink — neutral ink

Shortcut variant colors

Standalone compound variants — equivalent to variant + color in one class.

code-muted-*

code-muted-primary

code-muted-success

code-muted-error

code-outline-*

code-outline-primary

code-outline-success

code-outline-error

code-solid-*

code-solid-primary

code-solid-success

code-solid-error

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

blue-200

blue-500

[#ff0000] — raw color value

code-solid-[#ff0000] — solid with raw color

Use cases

Error logs and messages

ERROR TypeError: Cannot read property 'x' of undefined

WARN Deprecated: use new API instead

INFO Server started on port 3000

SUCCESS Build completed successfully!

Documentation references

Type: type User = { id: number; name: string }

Interface: interface Config { theme: string }

Generic: Array<T>

Regex: /^[a-zA-Z0-9]+$/

Pre + code blocks

JavaScript

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55

Python

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))  # 55

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

CSS

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

Long line (horizontal scroll)

const veryLongFunctionName = (param1, param2, param3, param4, param5, param6) => {
  return param1 + param2 + param3 + param4 + param5 + param6;
};

Log output

[2026-06-13 17:00:00] INFO  Starting server...
[2026-06-13 17:00:01] INFO  Server listening on port 3000
[2026-06-13 17:00:02] WARN  Deprecated configuration option detected
[2026-06-13 17:00:03] ERROR Failed to connect to database
[2026-06-13 17:00:04] INFO  Retrying connection...

Code Component