Complete Guide to React Highlight Component

Master the React Highlight component for beautiful text styling, color highlighting, and advanced typography in your Astro MDX files.

🚀 Quick Start

Import the Component

1
import Highlight from "@/react/Highlight/Highlight.jsx";

or

1
import Highlight from "../../react/Highlight/Highlight.jsx";

Important: Use .mdx extension (not .md) when working with React components.

Basic Usage

1
<Highlight> Your highlighted text </Highlight>

🎨 Color Modes Explained

Background Mode (Default - highlight='bg')

How it works: Uses the color prop for background color with white text. If no highlight mode is specified, it defaults to background mode.

1
<Highlight color='#ff6b6b'> Red background with white text </Highlight>

1
<Highlight color='#4299e1'> Blue background with white text </Highlight>

Foreground Mode (highlight='fg')

How it works: Uses the color prop for text color only. No background styling.

1
<Highlight color='#800031' highlight='fg'> Red text color </Highlight>

1
<Highlight color='#004080' highlight='fg'> Navy text color </Highlight>

Light Background Mode (highlight='lightBg')

How it works: Uses the color prop for light background with purple text (#4B0082).

1
<Highlight highlight='lightBg'> Light background with purple text </Highlight>

1
<Highlight highlight='lightBg' color='#D1FFBD'> Custom light background with purple text </Highlight>

🎯 Typography Controls

Font Weight

1
<Highlight color='#ff6b6b' highlight='fg' fontWeight='bold'> Bold text </Highlight>

1
<Highlight color='#ff6b6b' highlight='fg' fontWeight='lighter'> Light text </Highlight>

Font Style

1
<Highlight color='#4299e1' highlight='fg' fontStyle='italic'> Italic text </Highlight>

1
<Highlight color='#4299e1' highlight='fg' fontStyle='oblique'> Oblique text </Highlight>

📐 Text Alignment

Block Display Alignment

1
<Highlight color='#2d5aa0' highlight='format' textAlign='left' display='block'> Left aligned </Highlight>

1
<Highlight color='#c41e3a' highlight='format' textAlign='center' display='block'> Center aligned </Highlight>

1
<Highlight color='#0d7f3f' highlight='format' textAlign='right' display='block'> Right aligned </Highlight>

Justified Text

1
<Highlight color='#8b5a3c' highlight='format' textAlign='justify' display='block'>
2
This is justified text that stretches to fill the full width of the container, <br></br> creating even margins on both sides.
3
</Highlight>

🎨 Advanced Examples

Headers with Highlight

1
# <Highlight color='#004080' highlight='fg' fontWeight='bold'> Foreground Blue Header </Highlight>

Foreground Blue Header

1
## <Highlight color='#800031' highlight='fg' fontWeight='bold'> Foreground Brown Header </Highlight>

Foreground Brown Header

Combined Styling

1
<Highlight color='#ffc107' highlight='fg' fontWeight='bold' fontStyle='italic'> Bold italic warning </Highlight>

1
<Highlight color='#28a745' highlight='fg' fontWeight='bold'> Bold success message </Highlight>

Custom Format Mode

1
<Highlight highlight='format' color='red' textAlign='right' display='block' fontWeight='bolder' textDecoration='underline wavy red' fontStyle='oblique' fontSize='22px'> Advanced styling </Highlight>

🎨 Mixed Markdown Examples

Bold Text with Highlight

1
You can combine <Highlight color='#ff6b6b'> **bold** markdown</Highlight> with the Highlight component for emphasis.

You can combine bold markdown with the Highlight component for emphasis.

Headers and Lists

Important Notice

• This is a highlighted list item using markdown
• Another item with italic emphasis and highlighting
• Warning: Always test your combinations

Inline Code and Links

Check out this <Highlight color='#6f42c1'>inline code</Highlight> example and visit our docs for more information.

📋 Component Props Reference

🎯 Mode-Specific Behavior

Background Mode (highlight='bg')

• Uses color for background color
• Fixed white text color (#fff)
• Supports fontStyle only
• Rounded corners and padding applied automatically
• Default mode when no highlight prop is provided

Foreground Mode (highlight='fg')

• Uses color for text color only
• Supports all typography props: fontWeight, fontStyle, textAlign, display, textDecoration
• No background styling

Light Background Mode (highlight='lightBg')

• Uses color for light background color
• Fixed purple text color (#4B0082)
• Supports fontStyle only
• Subtle padding and rounded corners

Format Mode (highlight='format')

• Uses color for text color
• Supports all props including fontSize
• Block-level display by default
• Advanced styling capabilities

🎨 Color Suggestions

For Background Mode (with white text)

• #ff6b6b - Vibrant red
• #4299e1 - Professional blue
• #28a745 - Success green
• #ffc107 - Warning yellow
• #dc3545 - Danger red
• #6f42c1 - Purple
• #20c997 - Teal
• #fd7e14 - Orange

For Foreground Mode (text colors)

• #800031 - Burgundy
• #004080 - Navy blue
• #0d7f3f - Forest green
• #c41e3a - Crimson
• #8b5a3c - Brown
• #2d5aa0 - Royal blue
• #1877F2 - Facebook blue
• #ff6b6b - Coral

For Light Background Mode (with purple text)

• #D1FFBD - Light green
• #FFE4B5 - Light orange
• #E6E6FA - Lavender
• #F0FFF0 - Honeydew
• #FFFACD - Lemon chiffon
• #F5DEB3 - Wheat

🎯 Best Practices

✅ Do’s

• Use meaningful color combinations for accessibility
• Combine multiple props for rich styling
• Use display='block' for text alignment
• Test in both light and dark themes
• Choose appropriate colors from the suggestions above

❌ Don’ts

• Avoid using too many props on single elements
• Don’t rely on default colors without theme testing
• Avoid very small font sizes with complex styling
• Don’t use light colors for background mode (use foreground mode instead)

🚀 Ready to Use Examples

Error Messages

1
<Highlight color='#f44336'> Error message in red background </Highlight>

Success Messages

1
<Highlight color='#28a745'> Success message in green background </Highlight>

Muted Text

1
<Highlight color='#C0C0C0'> Muted text in silver background </Highlight>

Highlighted Notes

1
<Highlight highlight='lightBg' color='#D1FFBD'> Highlighted note with light background </Highlight>

Important Text

1
<Highlight color='#800031' highlight='fg' fontWeight='bold'> Important bold text </Highlight>

Emphasized Text

1
<Highlight color='#1877F2' highlight='fg' fontStyle='italic'> Emphasized italic text </Highlight>

Default Highlight

1
<Highlight> Default highlight - works in any theme </Highlight>

Perfect for creating beautiful, accessible highlighted text in your Astro MDX content! 🎨⚛️