Marker
Highlight.js

A JavaScript library for dynamic, animated text highlighting. Canvas-based rendering with multiple drawing modes.

Download GitHub

Built by solarise.dev

Drawing Modes

Highlight

Default Mode

The classic highlighter pen effect with customizable wave patterns and rough edges.

HTML
<mark class="mark-yellow"
     data-drawing-mode="highlight"
     data-animation-speed="1200">highlighter pen effect</mark>
JavaScript
new MarkerHighlighter(container, {
    drawingMode: 'highlight',
    animationSpeed: 1200
});
Circle

Hand-drawn Circle

Draw a sketchy circle around text for emphasis.

HTML
<mark class="mark-red"
     data-drawing-mode="circle"
     data-animation-speed="1500"
     data-height="1.8"
     data-padding="0.8">sketchy circle</mark>
JavaScript
new MarkerHighlighter(container, {
    drawingMode: 'circle',
    animationSpeed: 1500,
    height: 1.8,
    padding: 0.8
});
Burst

Radiating Lines

Create an explosive burst effect radiating outward.

HTML
<mark class="mark-blue"
     data-drawing-mode="burst"
     data-animation-speed="800"
     data-burst='{"count": 16, "power": 1.5}'>explosive burst</mark>
JavaScript
new MarkerHighlighter(container, {
    drawingMode: 'burst',
    animationSpeed: 800,
    burst: {
        count: 16,
        power: 1.5
    }
});
Scribble

Messy Scribble

A chaotic scribbled line for a hand-drawn feel.

HTML
<mark class="mark-yellow"
     data-drawing-mode="scribble"
     data-animation-speed="1000">scribbled line</mark>
JavaScript
new MarkerHighlighter(container, {
    drawingMode: 'scribble',
    animationSpeed: 1000
});
Sketchout

Sketchy Rectangle

Draw a rough rectangle outline around text.

HTML
<mark class="mark-red"
     data-drawing-mode="sketchout"
     data-animation-speed="1200">rough rectangle</mark>
JavaScript
new MarkerHighlighter(container, {
    drawingMode: 'sketchout',
    animationSpeed: 1200
});
Combined

Mix and Match

Use underline style with bold highlights on the same page.

HTML
<mark data-highlight-style="underline">underline</mark>
<mark data-highlight-style="bold">bold</mark>
JavaScript
// Define reusable styles
MarkerHighlighter.defineStyle('underline', {
    height: 0.15,
    offset: 0.8,
    padding: 0
});

MarkerHighlighter.defineStyle('bold', {
    padding: 0.3,
    height: 1.2
});

Configuration Options

Height

Half height vs double height highlights.

Offset

Overline and underline effects using offset.

Wave Amplitude

Flat vs wavy highlight edges.

Animation Speed

Fast and slow animation speeds.

Padding

No padding vs generous padding around text.

Skew

Slanted forward and slanted back highlights.

HTML
<!-- Height -->
<mark data-height="0.5">Half height</mark>
<mark data-height="2">Double height</mark>

<!-- Offset -->
<mark data-height="0.2" data-offset="-0.5">Overline</mark>
<mark data-height="0.2" data-offset="0.8">Underline</mark>

<!-- Amplitude -->
<mark data-highlight='{"amplitude": 0.1}'>Flat</mark>
<mark data-highlight='{"amplitude": 1.5}'>Wavy</mark>

<!-- Skew -->
<mark data-skew-x="0.5">Forward</mark>
<mark data-skew-x="-0.5">Back</mark>
JavaScript
new MarkerHighlighter(container, {
    height: 1.5,       // 1 = line height
    offset: 0,        // vertical position
    padding: 0.2,     // horizontal padding
    skewX: 0.3,       // italic slant
    highlight: {
        amplitude: 0.5  // edge waviness
    }
});

Multi-line Text

Highlights automatically wrap across multiple lines. Each line segment animates in sequence when you set a multi-line delay. The effect creates a natural reading flow.

HTML
<mark data-animation-speed="2000"
     data-multi-line-delay="0.3"
     data-highlight='{"amplitude": 0.4, "wavelength": 4}'>
    Multi-line text here...
</mark>
JavaScript
new MarkerHighlighter(container, {
    animationSpeed: 2000,
    multiLineDelay: 0.3,  // delay between lines (ratio)
    highlight: {
        amplitude: 0.4,
        wavelength: 4
    }
});

Nested Highlights

Highlights can be nested inside each other with proper z-index handling for layered visual effects.

HTML
<mark class="outer">nested inside
    <mark class="middle">each other with
        <mark class="inner">proper z-index</mark>
    for layered</mark>
visual effects</mark>
CSS
/* Each level needs its own background color */
.outer { background-color: #FDD835; }
.middle { background-color: #E53935; }
.inner { background-color: #1E88E5; }

Scroll-triggered Animation

This highlight animates when you scroll it into view.

HTML
<mark data-animation-trigger="scrollIntoView"
     data-animation-speed="1500">
    Scroll-triggered text
</mark>
JavaScript
// Or set globally:
new MarkerHighlighter(container, {
    animationTrigger: 'scrollIntoView'
});

// Uses IntersectionObserver internally

Circle Mode Options

Curve 0

Square shape

Curve 0.5

Rounded corners

Curve 1

Full ellipse

HTML
<mark data-drawing-mode="circle"
     data-circle='{"curve": 0, "loops": 2, "thickness": 3}'>Square</mark>

<mark data-drawing-mode="circle"
     data-circle='{"curve": 0.5, "loops": 3, "thickness": 2}'>Rounded</mark>

<mark data-drawing-mode="circle"
     data-circle='{"curve": 1, "loops": 3, "thickness": 2}'>Ellipse</mark>
JavaScript
new MarkerHighlighter(container, {
    drawingMode: 'circle',
    circle: {
        curve: 0,       // 0 = square, 1 = ellipse
        loops: 3,       // number of overlapping strokes
        thickness: 2,   // line thickness
        wobble: 1       // hand-drawn wobbliness
    }
});

Burst Mode Options

Lines

Straight lines

Curves

Curved rays

Cloud

Cloud puffs

HTML
<mark data-drawing-mode="burst"
     data-burst='{"style": "lines", "count": 14, "power": 1.5}'>Straight</mark>

<mark data-drawing-mode="burst"
     data-burst='{"style": "curve", "count": 12, "power": 1.8}'>Curved</mark>

<mark data-drawing-mode="burst"
     data-burst='{"style": "cloud", "count": 25, "power": 1.5}'>Cloud</mark>
JavaScript
new MarkerHighlighter(container, {
    drawingMode: 'burst',
    burst: {
        style: 'lines',   // 'lines', 'burst', 'curve', 'cloud'
        count: 14,        // number of rays/puffs
        power: 1.5,       // ray length multiplier
        randomness: 0.3  // variation in placement
    }
});

Get the Library

Download marker-highlight.min.js ~30KB View on GitHub
1 Add the script to your page
2 Wrap text in <mark> tags
3 Initialize with new MarkerHighlighter(container)
<!-- Add to your HTML --> <script type="module"> import { MarkerHighlighter } from './dist/marker-highlight.min.js'; new MarkerHighlighter(document.body); </script> <p>This is <mark>highlighted text</mark>.</p>