Documentation Index
Fetch the complete documentation index at: https://mintlify.com/ragaeeb/dyelight/llms.txt
Use this file to discover all available pages before exploring further.
Line highlighting allows you to apply background colors or styles to entire lines, independent of character-level highlights. This is useful for indicating errors, warnings, or marking lines of interest.
Basic usage
Line highlights use zero-based line numbers as keys and accept either CSS class names or direct color values:
import { DyeLight, HighlightBuilder } from 'dyelight';
function ErrorHighlighter() {
const [text, setText] = useState('Line 1\nLine 2 with error\nLine 3');
// Highlight line 1 (0-indexed) with error styling
const lineHighlights = HighlightBuilder.lines([
{ line: 1, className: 'bg-red-100' },
{ line: 2, color: '#e8f5e8' },
]);
return (
<DyeLight
value={text}
onChange={setText}
lineHighlights={lineHighlights}
/>
);
}
CSS classes vs color values
DyeLight automatically detects whether you’re using a CSS class name or a color value. The component’s isColorValue function (from textUtils.ts) determines this and applies the appropriate styling.
Using CSS classes
CSS classes provide more flexibility and allow you to define complex styles:
const lineHighlights = {
0: 'error-line',
2: 'warning-line',
5: 'info-line',
};
.error-line {
background-color: #ffebee;
border-left: 4px solid #c62828;
}
.warning-line {
background-color: #fff3e0;
border-left: 4px solid #f57c00;
}
.info-line {
background-color: #e3f2fd;
border-left: 4px solid #1976d2;
}
Using color values
For simple background colors, you can pass color values directly:
const lineHighlights = {
0: '#ffebee', // Hex color
1: 'rgb(232, 245, 232)', // RGB
2: 'rgba(227, 242, 253, 0.5)', // RGBA with transparency
3: 'lightblue', // Named color
};
When using color values, DyeLight sets them as the backgroundColor inline style (see DyeLight.tsx:48-57). For more complex styling, use CSS classes instead.
Building line highlights
The HighlightBuilder.lines() utility provides a convenient way to create line highlight objects:
const lineHighlights = HighlightBuilder.lines([
{ line: 0, className: 'error-line' },
{ line: 2, color: '#ffff00' },
{ line: 5, className: 'highlight-current' },
]);
// Produces:
// {
// 0: 'error-line',
// 2: '#ffff00',
// 5: 'highlight-current'
// }
Combining with character highlights
Line highlights and character highlights work independently and can be combined:
function CombinedExample() {
const [code, setCode] = useState(`function hello() {
const x = 42;
console.log(x);
}`);
// Highlight keywords at character level
const highlights = HighlightBuilder.pattern(
code,
/\b(function|const)\b/g,
'text-blue-600'
);
// Highlight line 2 (the console.log line)
const lineHighlights = { 2: 'bg-yellow-100' };
return (
<DyeLight
value={code}
onChange={setCode}
highlights={highlights}
lineHighlights={lineHighlights}
/>
);
}
Line highlights are applied to the entire line element, while character highlights are applied to <span> elements within the line. This means character highlight styles will layer on top of line highlight backgrounds.
Dynamic line highlighting
You can dynamically update line highlights based on user interactions or validation results:
function DynamicLineHighlights() {
const [text, setText] = useState('');
const [errors, setErrors] = useState<number[]>([]);
// Run validation on text change
useEffect(() => {
const lines = text.split('\n');
const errorLines = lines
.map((line, index) => (line.includes('ERROR') ? index : -1))
.filter(index => index !== -1);
setErrors(errorLines);
}, [text]);
// Build line highlights from error lines
const lineHighlights = HighlightBuilder.lines(
errors.map(line => ({ line, className: 'bg-red-100' }))
);
return (
<DyeLight
value={text}
onChange={setText}
lineHighlights={lineHighlights}
/>
);
}
createLineElement function (from DyeLight.tsx:35) determines whether to apply a class or inline style based on the highlight value.
Unlike character highlights that require parsing and splitting text, line highlights have minimal overhead and can be applied to thousands of lines without performance issues.