Getting started

You can download the package using npm by running:

npm install advanced-mark.js --save-dev

A dist directory contains files:

JS

To include the library in web page just add:

<script src="path/to/mark.js"></script>

Note: the library requires UTF-8 encoding and may needs adding charset attribute:

<script src="path/to/mark.js" charset="utf-8"></script>

CSS

To customize a style of mark elements:

mark {
  background-color: yellow;
  color: black;
}

To customize a style of highlighting when using the CSS Custom Highlight API:

::highlight(highlight-name) { /* the default Highlight object name is 'advanced-markjs' */
  background-color: yellow;
  color: black;
}

See how to customize a style inside iframes and shadow DOM.

API

There are four API methods:

• mark() - to highlight custom terms
• markRegExp() - to highlight custom regular expressions
• markRanges() - to highlight ranges with a start and length properties (of text or lines with markLines option)
• unmark() - to remove highlights

JavaScript

API methods called on an instance object. To initialize a new instance, you have to use:

var instance = new Mark(context);
instance.mark('lorem');

where the context can be:

• a single element get by e.g. document.getElementById() or document.querySelector()
• a NodeList get by e.g. document.querySelectorAll()
• an array containing multiple single elements (Note that internally the array is sorted by the element position in the document)
• a string selector (internally calls document.querySelectorAll())

jQuery

API methods called on every jQuery element:

$("div.test").mark('lorem');