Syntax highlighting

Build a code editor with keyword, string, and comment highlighting

DyeLight’s pattern-based highlighting makes it perfect for building code editors with syntax highlighting. This guide shows how to highlight different code elements.

Code editor example

Here’s a complete example highlighting JavaScript syntax:

import { DyeLight, HighlightBuilder } from 'dyelight';
import { useState } from 'react';

function CodeEditor() {
    const [code, setCode] = useState(`
function hello() {
  const message = "Hello World";
  console.log(message);
}
    `);

    // Highlight JavaScript keywords
    const keywordHighlights = HighlightBuilder.pattern(
        code,
        /\b(function|const|let|var|if|else|for|while)\b/g,
        'text-blue-600 font-semibold',
    );

    // Highlight strings
    const stringHighlights = HighlightBuilder.pattern(
        code,
        /"[^"]*"/g,
        'text-green-600'
    );

    // Highlight specific words
    const wordHighlights = HighlightBuilder.words(
        code,
        ['console', 'log'],
        'text-purple-600'
    );

    return (
        <DyeLight
            value={code}
            onChange={setCode}
            highlights={[...keywordHighlights, ...stringHighlights, ...wordHighlights]}
            className="font-mono text-sm"
            enableAutoResize
        />
    );
}

This example demonstrates three types of highlights:

• Keywords (blue): function, const, let, var, etc.
• Strings (green): Text wrapped in double quotes
• Built-in methods (purple): console, log

Pattern-based highlighting

The HighlightBuilder.pattern() method accepts regular expressions to match text:

Keywords

// Highlight programming keywords
const keywords = HighlightBuilder.pattern(
    code,
    /\b(function|const|let|var|if|else|return)\b/g,
    'text-blue-600 font-semibold'
);

The g flag is required for regex patterns to match all occurrences. Use \b for word boundaries to avoid partial matches.

Word-based highlighting

For highlighting specific words, use HighlightBuilder.words():

// Highlight built-in functions
const builtins = HighlightBuilder.words(
    code,
    ['console', 'log', 'warn', 'error', 'parseInt', 'parseFloat'],
    'text-purple-600'
);

// Highlight React hooks
const hooks = HighlightBuilder.words(
    code,
    ['useState', 'useEffect', 'useCallback', 'useMemo'],
    'text-pink-600 font-semibold'
);

The words() method automatically adds word boundaries, so useState won’t match inside myUseState.

Combining multiple patterns

You can combine different highlight types by spreading them into a single array:

function AdvancedEditor() {
    const [code, setCode] = useState('');

    const keywords = HighlightBuilder.pattern(
        code,
        /\b(function|const|let|var)\b/g,
        'text-blue-600'
    );

    const strings = HighlightBuilder.pattern(
        code,
        /"[^"]*"/g,
        'text-green-600'
    );

    const numbers = HighlightBuilder.pattern(
        code,
        /\b\d+\b/g,
        'text-orange-600'
    );

    const comments = HighlightBuilder.pattern(
        code,
        /\/\/.*/g,
        'text-gray-500'
    );

    return (
        <DyeLight
            value={code}
            onChange={setCode}
            highlights={[
                ...keywords,
                ...strings,
                ...numbers,
                ...comments
            ]}
            className="font-mono"
        />
    );
}

Highlight priority

When highlights overlap, later highlights in the array take precedence:

const highlights = [
    ...generalPatterns,  // Applied first
    ...specificPatterns, // Applied second (takes precedence)
];

Be careful with overlapping patterns. The component renders highlights in order, so overlapping ranges may not display as expected.

Using custom styles

You can use inline styles instead of CSS classes:

const keywords = HighlightBuilder.pattern(
    code,
    /\b(function|const)\b/g,
    undefined,  // No className
    {
        backgroundColor: '#e3f2fd',
        color: '#1976d2',
        fontWeight: 600,
        borderRadius: '2px',
        padding: '0 2px'
    }
);

Real-world example

Here’s a more complete TypeScript/JSX editor:

function TypeScriptEditor() {
    const [code, setCode] = useState('');

    // TypeScript keywords
    const tsKeywords = HighlightBuilder.pattern(
        code,
        /\b(interface|type|enum|class|extends|implements)\b/g,
        'text-indigo-600 font-semibold'
    );

    // JavaScript keywords
    const jsKeywords = HighlightBuilder.pattern(
        code,
        /\b(function|const|let|var|return|if|else|for|while)\b/g,
        'text-blue-600 font-semibold'
    );

    // Strings
    const strings = HighlightBuilder.pattern(
        code,
        /"[^"]*"|'[^']*'|`[^`]*`/g,
        'text-green-600'
    );

    // JSX tags
    const jsxTags = HighlightBuilder.pattern(
        code,
        /<\/?\w+/g,
        'text-red-600'
    );

    return (
        <DyeLight
            value={code}
            onChange={setCode}
            highlights={[
                ...tsKeywords,
                ...jsKeywords,
                ...strings,
                ...jsxTags
            ]}
            className="font-mono text-sm p-4 bg-gray-50"
            placeholder="Enter TypeScript code..."
        />
    );
}

Next steps

• Error highlighting - Add validation and error indicators
• Styling - Customize the editor’s appearance
• Controlled vs uncontrolled - Choose the right component mode