@blank-utils/syntax-highlighter

A React component that uses CSS font-palette-values for syntax highlighting. This component leverages custom fonts with built-in color palettes to provide fast, lightweight syntax highlighting without JavaScript parsing.

Features

• 🚀 Fast: Uses CSS font-palette-values for instant syntax highlighting
• 🎨 Customizable: Configurable color palette for different themes
• 📦 Lightweight: No JavaScript parsing, pure CSS-based highlighting
• 🎯 TypeScript: Full TypeScript support with exported types
• 🎨 VS Code Theme: Default colors based on VS Code dark theme

Installation

pnpm add @blank-utils/syntax-highlighter

Usage

Basic Usage

import SyntaxHighlighter from '@blank-utils/syntax-highlighter';

function App() {
  return (
    <SyntaxHighlighter>
      const hello = "world";
      // This is a comment
      function greet(name) {
        return `Hello ${name}!`;
      }
    </SyntaxHighlighter>
  );
}

Custom Colors

import SyntaxHighlighter from "@blank-utils/syntax-highlighter";

function App() {
	return (
		<SyntaxHighlighter
			palette={{
				keywords: "#FF6B6B", // Keywords and braces
				comments: "#4ECDC4", // Comments
				literals: "#45B7D1", // String literals
				numbers: "#96CEB4", // Numbers
				functions: "#FFEAA7", // Functions and brackets
				others: "#DDA0DD", // Other JavaScript tokens
				quotes: "#FFB6C1", // Inside quotes
				additional: "#98D8C8", // Additional characters
			}}
		>
			const hello = "world";
		</SyntaxHighlighter>
	);
}

Color Palette

The component uses 9 color slots that map to different syntax elements:

| Slot | Purpose | Default Color | | ---- | ----------------------------- | ------------- | | 0 | Keywords, braces {} | #4EC9B0 | | 1 | Comments | #6A9955 | | 2 | String literals | #CE9178 | | 3 | Numbers | #B5CEA8 | | 4 | Functions, brackets [] | #DCDCAA | | 5 | Other JavaScript tokens | #C586C0 | | 6 | Unused (reserved) | #000000 | | 7 | Inside quotes, CSS properties | #9CDCFE | | 8 | Additional characters | #569CD6 |

Props

SyntaxHighlighterProps

| Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ---------------------- | | children | React.ReactNode | - | The code to highlight | | className | string | "" | Additional CSS classes | | palette | ColorPalette | {} | Custom color palette |

ColorPalette

interface ColorPalette {
	keywords?: string; // Keywords and braces
	comments?: string; // Comments
	literals?: string; // String literals
	numbers?: string; // Numbers
	functions?: string; // Functions and brackets
	others?: string; // Other JavaScript tokens
	unused?: string; // Reserved slot
	quotes?: string; // Inside quotes
	additional?: string; // Additional characters
}

How It Works

This component uses CSS @font-palette-values to define custom color palettes for the syntax highlighting font. The font contains different glyphs for different syntax elements, and the palette maps colors to these glyphs.

The highlighting happens entirely in CSS, making it extremely fast and lightweight compared to JavaScript-based syntax highlighters.

License

MIT