Hilite Everything

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quas obcaecati eos tempore, assumenda cum dolore distinctio dolorem ducimus dolor ipsa repellendus libero. Quo cum, placeat totam nesciunt eaque vitae?

Have you ever wanted to add a little bit of colour and life to a website? Do you think plain old HTML markup is a little bit boring? or are bored with basic underlines, bolds and italics? Do you think the web should be a little bit sillier and colourful?.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quas obcaecati eos tempore, assumenda cum dolore distinctio dolorem ducimus dolor ipsa repellendus libero. Quo cum, placeat totam nesciunt eaque vitae?

Highlight
anything
you like!

Create exciting effects!
Or keep it simple

This library isn't available for download yet. Check back soon!

A JavaScript library for creating fluid, dynamic and highly customisable highlight effects for text and, eventually, all sorts of HTML DOM elements!

I created this library after looking for a suitable solution for marking up text on a website in an interesting, eye-catching way. I found a few existing libraries, but I wanted something that really jumps off the page!

So many possibilities

There are multiple configuration options available. Currently, you can adjust the parameters of the default highlight style, HighlighterMarker

I'm planning more highlight styles in future, including circling/loop effects (imagine circling text on a page with a big red pen) or bang lines to show emphasis! (think of sketching a little explosion or a "pop")

By using the line height as a constant to define the variables, the highlight effects also scale very nicely with different font sizes!

Make use of markerHighlighter to really help your website text pop!

Mix it up! Change things on the fly

MarkerHighlight supports three ways of specifying config options:

  1. Setting options globally within the constructor
    new MarkerHighlight(el, options)
  2. Defining reusable style definitions to use with
    <mark data-highlight-style='code'>
  3. Overriding options on a per-element basis like so:
    <mark data-height='1.5' data-highlight-amplitude='2'>

Features

They respect new lines too. Which means you can have highlighted text that runs on for several lines! Lorem ipsum dolor sit amet consectetur adipisicing elit. A accusamus hic fugit corporis maiores fuga consequatur provident, dignissimos illum facilis odio, obcaecati ullam suscipit perferendis tempore consequuntur esse quam natus. See?

You can also set it up so that these highlights trigger, say, 5 seconds later...

And resizing the page isn't a problem either. The highlights will automatically reposition to match the text

Events

Hook into events to control each highlight individually.

onStart and onEnd events can be used to adjust DOM elements based on highlight state, or otherwise react to the start and end points of a highlight animation.

This can be useful for e.g. changing the colour of text over the course of a highlight animation

Methods

.restart() can be used to programatically restart a highlight animation

P.S. Don't use this to keep your secrets safe!

This is an ongoing project, more to come! I'll be launching this eventually as an open source project, initially as a demo/proof of concept (will be a while before it's seriously production-ready!)
Wishlist - optimisation (lots!), circle and "bang" draw modes, right-to-left highlighting