Highlight Marker

Interactive text highlighting that activates when readers reach specific sections

Highlight Marker

The Highlight Marker feature allows you to mark important phrases, words, or text in your documentation. When a reader scrolls and reaches the section containing your marked text, those highlights automatically animate and draw attention to key information.

Overview

Think of Highlight Marker as a digital highlighter pen. You can mark important text in your MDX files, and when readers scroll to that section, the marked text comes to life with a beautiful animated highlight effect that matches your website's theme.

Features

  • ✅ Automatic Activation: Highlights animate when readers reach the containing section
  • ✅ Multiple Colors: Choose from 5 color options (yellow, orange, blue, green, purple)
  • ✅ Smooth Animations: Beautiful pulse effect draws attention without being distracting
  • ✅ Theme-Aware: Automatically adapts to light and dark modes
  • ✅ Section-Aware: Activates based on scroll position and active headings
  • ✅ Non-Intrusive: Subtle when inactive, prominent when active

Basic Usage

Simple Highlight

Wrap any text with the <Highlight> component:

MDX Syntax:

Rendered Result:

Installation Steps

Follow these critical steps to ensure a successful installation.

Highlight with Custom Color

You can specify a color for your highlight:

MDX Syntax:

Rendered Result:

Important Notice

This feature requires administrator privileges to function correctly.

Available Colors

The Highlight Marker supports 5 color options:

  1. yellow (default) - Classic yellow highlighter
  2. orange - Warm orange highlight (matches primary theme)
  3. blue - Cool blue highlight
  4. green - Fresh green highlight
  5. purple - Rich purple highlight

Color Examples

MDX Syntax:

Rendered Result:

Color Examples

  • Yellow highlight - Default, classic highlighter
  • Orange highlight - Matches primary theme
  • Blue highlight - Cool and professional
  • Green highlight - Fresh and positive
  • Purple highlight - Rich and distinctive

How It Works

The Highlight Marker is section-aware. It automatically detects which heading (H2, H3, or H4) contains the marked text, and activates the highlight animation when:

  1. The reader scrolls to that section
  2. The section's heading becomes active in the "ON THIS PAGE" table of contents
  3. The marked text comes into view

Activation Behavior

  • Inactive State: Marked text has a subtle background color (15-20% opacity)
  • Active State: When the section is reached, the highlight:
    • Increases opacity to 50%
    • Adds a glowing border effect
    • Pulses gently to draw attention
    • Smoothly transitions back when scrolling away

Complete Examples

Example 1: Installation Guide

MDX Syntax:

Rendered Result:

Prerequisites

Before you begin, make sure you have:

  • Node.js 20.19.4 or higher installed
  • Yarn package manager configured
  • Administrator privileges on your system

Installation Steps

Step 1: Clone Repository

Clone the repository to your local machine:

Step 2: Install Dependencies

Run yarn install to install all required packages.

Example 2: API Documentation

MDX Syntax:

Rendered Result:

Authentication

All API requests require authentication tokens in the Authorization header.

Endpoints

Create User

POST /api/v1/users - Creates a new user account.

Request Body:

  • name (required) - User's full name
  • email (required) - Valid email address
  • password (required) - Minimum 8 characters

Example 3: Key Concepts

MDX Syntax:

Rendered Result:

System Architecture

The system follows a microservices architecture pattern.

Core Components

  1. API Gateway: Routes all incoming requests to appropriate services
  2. Authentication Service: Handles user authentication and authorization
  3. Database Layer: Manages data persistence and retrieval

Important Notes

All services communicate asynchronously using message queues.

Best Practices

When to Use Highlights

  1. Key Terms: Highlight important technical terms or concepts

  2. Critical Information: Mark information that readers must not miss

  3. Step-by-Step Instructions: Highlight specific steps or commands

  4. Important Values: Mark specific values, versions, or configurations

When NOT to Use Highlights

  1. Don't overuse: Too many highlights can be distracting
  2. Don't highlight entire paragraphs: Keep highlights focused on key phrases
  3. Don't use for emphasis: Use bold or italic for general emphasis
  4. Don't highlight code: Code blocks already have syntax highlighting

Color Selection Tips

  • Yellow (default): Use for general important information
  • Orange: Use for warnings, critical steps, or theme-matching highlights
  • Blue: Use for technical terms, API endpoints, or professional concepts
  • Green: Use for success messages, positive actions, or completed steps
  • Purple: Use for special notes, unique features, or distinctive information

Advanced Usage

Multiple Highlights in One Section

You can use multiple highlights in the same section:

MDX Syntax:

Rendered Result:

Configuration

Set the API_URL environment variable to point to your server. The PORT defaults to 3000, but can be customized. Make sure authentication is enabled in production.

Highlights in Lists

Highlights work perfectly in lists:

MDX Syntax:

Rendered Result:

Requirements

  • Node.js 20.19.4+
  • Yarn 1.22+
  • Git for version control
  • Docker (optional, for containerization)

Highlights in Callouts

You can combine highlights with callouts for extra emphasis:

MDX Syntax:

Rendered Result:

Important

Before proceeding, ensure all prerequisites are met and backup your data. This process cannot be reversed.

Technical Details

Component Props

  • children (required): The text content to highlight
  • color (optional): Highlight color - 'yellow' | 'orange' | 'blue' | 'green' | 'purple' (default: 'yellow')

How Activation Works

  1. The component finds the nearest parent heading (H2, H3, or H4)
  2. It monitors scroll position relative to that heading
  3. When the heading section is in view (within 200px before and 400px after), highlights activate
  4. The highlight smoothly animates in and pulses to draw attention
  5. When scrolling away, highlights smoothly fade back to inactive state

Performance

  • Highlights use efficient scroll listeners with passive event handling
  • Animations are GPU-accelerated for smooth performance
  • No impact on page load time or initial render

Styling

The highlight effect includes:

  • Background color: Semi-transparent color that intensifies when active
  • Border glow: Subtle glowing border that appears when active
  • Pulse animation: Gentle pulsing effect (2s cycle) when active
  • Smooth transitions: All state changes are smoothly animated (400ms)

Theme Support

Highlights automatically adapt to your theme:

  • Light Mode: Slightly more vibrant colors for better visibility
  • Dark Mode: Adjusted opacity and glow effects for optimal contrast

Next Steps

Prev
Table of Contents
Next
Hero Image & Video