0

I am trying to highlight a phrase using Mark.js but part of the phrase is wrapped in an html tag. So Mark.js will not highlight the phrase. I am not sure how to resolve this. Any help will be appreciated.

<script type="text/javascript" src="mark.js" charset="UTF-8"></script>
<script type="text/javascript">

var instance = new Mark(document.querySelector("body"));

instance.mark("My", {
    accuracy: "exactly",
    separateWordSearch: false,
    className: "green"
});

//Does not work
instance.mark("paragraph~2", {
    accuracy: "exactly",
    separateWordSearch: false,
    className: "green"
});
</script>
<style id="compiled-css" type="text/css">
.green {
  background: green;
}

</style>
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph<sup>~2</sup></p>
</body>
</html>
Weston Goodwin
  • 781
  • 3
  • 12

1 Answers1

0

I figured out the problem. I needed to set acrossElements to true.

instance.mark("paragraph~2", { accuracy: "exactly", separateWordSearch: false, acrossElements: true, className: "green" });

Weston Goodwin
  • 781
  • 3
  • 12