Prefect

A lightweight React component that replaces the standard <pre> element with built-in line numbering, syntax-aware formatting, and developer-friendly enhancements.

Features

✨ Line Numbers - Automatic line numbering with no configuration needed
📱 Responsive - Works seamlessly on all screen sizes
♿ Accessible - Built with WCAG accessibility standards in mind
🎨 Customizable - Easy to style with CSS or CSS Modules
⚡ Lightweight - Minimal dependencies, optimized for performance

Installation

npm install @tkalve/prefect
# or
yarn add @tkalve/prefect
# or
pnpm add @tkalve/prefect

Quick Start

import { Prefect } from "@tkalve/prefect";

export function App() {
  const codeExample = `function hello() {
  console.log("Hello, world!");
}`;

  return <Prefect value={codeExample} />;
}

Usage

Basic Example

import { Prefect } from "@tkalve/prefect";

const code = `const greeting = "Hello, Prefect!";
console.log(greeting);`;

export function CodeBlock() {
  return <Prefect value={code} />;
}

With Custom Styling

import { Prefect } from "@tkalve/prefect";
import styles from "./MyCodeBlock.module.scss";

export function StyledCodeBlock() {
  return (
    <Prefect
      value="console.log('styled code');"
      className={styles.customCodeBlock}
    />
  );
}

Props

| Prop | Type | Description | | ----------- | -------- | ----------------------------------------- | | value | string | Required. The code content to display | | className | string | Optional CSS class for custom styling |

Styling & Customization

All Prefect styles are easily customizable using CSS custom properties (variables). Pass a className prop to your Prefect component and override any of the variables below.

CSS Custom Properties

Colors

| Property | Default (Light) | Default (Dark) | Description | | ------------------------ | ------------------ | ------------------------ | ------------------------ | | --prefect-bg | #fafafa | #1e1e1e | Background color | | --prefect-text | #000000 | #d4d4d4 | Text/code color | | --prefect-number-color | #9aa0a6 | #555555 | Line number color | | --prefect-border-color | #e5e5e5 | #333333 | Border and divider color | | --prefect-hover-bg | rgba(0,0,0,0.03) | rgba(255,255,255,0.05) | Hover background |

Spacing

| Property | Default | Description | | ------------------------------ | ------- | ------------------ | | --prefect-padding-vertical | 1rem | Top/bottom padding | | --prefect-padding-horizontal | 0 | Left/right padding | | --prefect-margin | 0 | Outer margin |

Line Numbers

| Property | Default | Description | | -------------------------------- | ------- | ----------------------------------- | | --prefect-number-padding-left | 1rem | Left padding of line number | | --prefect-number-padding-right | 1rem | Right padding of line number | | --prefect-number-min-width | 3ch | Minimum width of line number column | | --prefect-number-text-align | right | Alignment of line numbers | | --prefect-number-border-width | 1px | Width of divider line |

Code Content

| Property | Default | Description | | -------------------------------- | -------- | ---------------------------- | | --prefect-content-padding-left | 1.5rem | Left padding of code content | | --prefect-content-text-align | left | Alignment of code text |

Typography

| Property | Default | Description | | ------------------------- | ----------------------- | ------------- | | --prefect-font-family | "Consolas", monospace | Font family | | --prefect-font-size | 14px | Font size | | --prefect-line-height | 1.6 | Line height | | --prefect-border-radius | 8px | Border radius |

Simple Customization Example

.darkCodeBlock {
  --prefect-bg: #1a1a1a;
  --prefect-text: #e0e0e0;
  --prefect-number-color: #666;
  --prefect-border-color: #333;
  --prefect-padding-vertical: 1.5rem;
  --prefect-padding-horizontal: 1rem;
  --prefect-font-size: 13px;
}

import { Prefect } from "@tkalve/prefect";
import styles from "./MyCodeBlock.module.scss";

export function DarkCodeBlock() {
  return (
    <Prefect
      value="console.log('custom styled code');"
      className={styles.darkCodeBlock}
    />
  );
}

Theme Variants

Use the dark or light class names to force a theme:

<Prefect value={code} className="dark" />
<Prefect value={code} className="light" />

Accessibility

Prefect is built with accessibility in mind:

• Line numbers are marked with aria-hidden="true" to avoid redundant screen reader announcements
• Proper semantic HTML structure
• Respects system contrast preferences
• Empty lines are preserved with zero-width spaces for proper spacing

Browser Support

Modern browsers supporting ES2020 and React 19+

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Thomas Kalve

Repository

• GitHub: tkalve/prefect
• npm: @tkalve/prefect