Examples

Using Mark.js is easy. Scroll down to see it in action.

USER TUTORIAL
EXAMPLE 1
EXAMPLE 2

User Tutorial

A description of how to use Mark.js features as an End-User.

Highlgihter The Highlighter can be used when the pop-up is both maximized and minimized. To perform a highlight: turn the Highlighter on (by pressing the Highlighter Switch or by selecting a colour) and then select text to highlight. Highlights can be undone, or reset completely.
Notetaker The Notetaker can only be used when the pop-up is maximized. To write a note: turn the Notetaker on; write your note under the 'Note Content' section of the pop-up; and click anywhere on the viewport to attatch the top-left of your note. Notes can be erased or minimized interactively via their GUI. Note that the Notetaker turns itself off once a note is pasted.
Note Layers Navigate between Note Layers via the arrows under the 'Notetaker' feature. 'What happens in a layer, stays in that layer.' The 'Reset' Note Layer button erases all notes in the current Note Layer.
Additional Note Turning the Highlighter on turns the Notetaker off, and vice-versa.

Attatching Mark.js to a Component

Ideal when your web app has an important segment that you want to help users track.

Scenario

Say our webpage has a bank statement component that summarizes a user's transactions over some time period.
Since the user may want to remember any questionable transactions, we want to give them the ability to highlight the statement's text.
Since the component makes up a small part of our page, we also want to minimize the Mark.js GUI.

Mark.js Instantiation

const markInstance = new Mark("#bankStatement");
markInstance.useDarkTheme();
markInstance.minimize();
markInstance.freeze(); /* Don't allow user to maximize pop-up */
markInstance.setBottom("-150px");
markInstance.setRight("0");

Result

Date	Description	Withdrawals	Deposits
2020-12-01	Sub King	$23.05
2020-12-04	Steven's Jewellery		$55.89
2020-12-04	E-transfer		$100.00
2020-12-10	Cam's Convenience	$14.71
2020-12-16	American Bumper	$100.11
2020-12-20	E-transfer		$500.00
2020-12-21	Steven's Jewellery		$23.11
	TOTAL	$137.87	$679.00

Using Mark.js Throughout an Entire Page

Ideal when you want users to be able to make edits all over your webpage.

Scenario

For this example, we want to be able to keep track of any notes we need to make while going over the Mark.js documentation.
We may, for instance, want to highlight a method so that we remember to make use of it later, or leave a note next to a method description that doesn't sit well with us.
Since we want to have access to both the Highlighter and Notetaker features, we will not freeze the pop-up this time. We will however initially minimize the pop-up; we don't want it to interfere too much with the documentation.
We will will also choose the pop-up's (default) light theme; it fits well with the documentation page.
Lastly, we'll fix its position to the top-right of the viewport.

Mark.js Instantiation

const markInstance = new Mark();
markInstance.useLightTheme();
markInstance.useLightTheme();
markInstance.highlighterColours("orange", "lime", "pink", "cyan");
// Fix to top-right of viewport.
markInstance.setTop("80px");
markInstance.setRight("20px");
// Minimize initially.
markInstance.minimize();
// Leave note for user to use the pop-up.
markInstance.addNote({
left: 100,
top: 100,
}, "Use the pop-up!");

SEE RESULT