Code

Import

import { Code } from '@delightstack/components';

Basic Usage

1function greet(name: string) {
2  console.log(`Hello, ${name}!`);
3}
4
5greet('World');

View code

<script>
  import { Code } from '@delightstack/components';

  const snippet = `function greet(name: string) {
  console.log(\`Hello, \${name}!\`);
}

greet('World');`;
</script>

<Code code={snippet} language="typescript" />

Examples

With Filename

A header bar appears when filename or show_copy is set.

greeting.ts

1function greet(name: string) {
2  console.log(`Hello, ${name}!`);
3}
4
5greet('World');

View code

<Code
  code={snippet}
  language="typescript"
  filename="greeting.ts"
/>

Line Highlighting

Draw attention to specific lines by providing their line numbers.

cart.js

1function calculateTotal(items) {
2  let total = 0;
3  for (const item of items) {
4    total += item.price * item.quantity;
5  }
6  return total;
7}

View code

<script>
  import { Code } from '@delightstack/components';

  const snippet = `function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    total += item.price * item.quantity;
  }
  return total;
}`;
</script>

<Code code={snippet} language="javascript" highlight_lines={[3, 4]} filename="cart.js" />

Without Line Numbers

npm install @delightstack/components

View code

<Code
  code="npm install @delightstack/components"
  language="bash"
  show_line_numbers={false}
/>

Diff Display

Lines starting with + get a green background, lines starting with - get a red background, and @@ lines are styled as section headers.

greet.js

1@@ -1,5 +1,6 @@
2 function greet(name) {
3-  console.log("Hello");
4+  console.log("Hello, " + name);
5+  return name;
6 }
7
8-greet();
9+greet("World");

View code

<script>
  import { Code } from '@delightstack/components';

  const diffOutput = `@@ -1,5 +1,6 @@
function greet(name) {
-  console.log("Hello");
+  console.log("Hello, " + name);
+  return name;
}

-greet();
+greet("World");`;
</script>

<Code code={diffOutput} diff filename="greet.js" />

Max Height with Scroll

Long code blocks can be constrained with a maximum height. The content scrolls vertically while the header stays visible.

math_utils.py

1def fibonacci(n):
2    """Calculate the nth Fibonacci number."""
3    if n <= 0:
4        return 0
5    elif n == 1:
6        return 1
7
8    a, b = 0, 1
9    for _ in range(2, n + 1):
10        a, b = b, a + b
11    return b
12
13
14def factorial(n):
15    """Calculate n factorial."""
16    if n < 0:
17        raise ValueError("n must be non-negative")
18    result = 1
19    for i in range(2, n + 1):
20        result *= i
21    return result
22
23
24def is_prime(n):
25    """Check if a number is prime."""
26    if n < 2:
27        return False
28    for i in range(2, int(n ** 0.5) + 1):
29        if n % i == 0:
30            return False
31    return True
32
33
34if __name__ == "__main__":
35    print(fibonacci(10))
36    print(factorial(5))
37    print(is_prime(17))

View code

<Code
  code={longCodeBlock}
  language="python"
  max_height="200px"
  filename="math_utils.py"
/>

Line Wrapping

utils.ts

1// This file contains some intentionally long lines to demonstrate line wrapping behavior
2const apiEndpoint = "https://api.example.com/v2/organizations/acme-corp/projects/my-project/environments/production/deployments/latest";
3
4export function createQueryString(params: Record<string, string>): string {
5  return Object.entries(params).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join("&");
6}

View code

<Code
  code={longLineCode}
  language="typescript"
  wrap
  filename="utils.ts"
/>

Skeleton Loading

Show loaded

View code

<Code skeleton={loading} code={loading ? '' : snippet} language="javascript" />

Props

Prop	Type	Default	Description
code	string	required	Code string to display
language	string	'plaintext'	Language for syntax highlighting
filename	string	-	Filename displayed in the header
show_line_numbers	boolean	true	Show line numbers
show_copy	boolean	true	Show copy-to-clipboard button
start_line	number	1	Starting line number
highlight_lines	number[]	[]	Line numbers to highlight
diff	boolean	false	Render as unified diff
wrap	boolean	false	Wrap long lines instead of horizontal scroll
max_height	string	-	Max height with vertical scroll (e.g., '400px')
skeleton	boolean	false	Show loading skeleton
id	string	auto	Element ID
class	string	''	Additional CSS classes

Supported Languages

The built-in tokenizer supports these languages out of the box:

• JavaScript / TypeScript (js, jsx, ts, tsx)
• HTML / XML
• CSS / SCSS / Sass / Less
• JSON / JSONC
• Python
• Bash / Shell / Zsh
• SQL
• Svelte
• Markdown
• Plaintext (default)

Accessibility

• Uses semantic <pre><code> markup
• Copy button is keyboard accessible with aria-label (“Copy code” / “Copied”)
• Line numbers are decorative (aria-hidden="true") and excluded from text selection via user-select: none
• Focus ring on the copy button for keyboard navigation
• Respects prefers-reduced-motion for skeleton animations