Difficulty Using JavaScript Highlight Plugin

Question

I'm trying to use a plugin called mark.js (https://markjs.io/). From my perspective I'm doing everything they say to, but the Chrome console keeps returning the error:

My html code is as follows:

<!doctype html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js"></script>
        <script src="highlighter.js"></script>
    </head>
    <body>
        <p>hello i am rob</p>
    </body>
</html>

My javascript code, in a file called "highlighter.js", is as follows:

var context = document.querySelector(".context");
var instance = new Mark(context);
instance.mark("rob");

A screenshot from the plugin website:

I don't know what I'm doing wrong. Thanks for the help!

gotnull · Accepted Answer · 2016-07-04T05:17:22.167

You have to have a class name of .context in order for it to recognise that as the context.

var context = document.querySelector(".context"); // <p> tag class name
var instance = new Mark(context);
instance.mark("rob");

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js"></script>

<!-- notice the class="context" on the paragraph tag -->
<p class="context">hello i am rob</p>

https://jsfiddle.net/e6yzpton/

To mark the entire document you could do something like this:

var context = document.querySelector("body");
var instance = new Mark(context);
var paragraph = document.getElementsByTagName("p")[0].innerHTML;
instance.mark(paragraph);

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js"></script>

<body>
    <p>and it was all yellow</p>
</body>

https://jsfiddle.net/e6yzpton/2/

Since you helped me with that, maybe you could also help me with this related question: https://stackoverflow.com/questions/38178774/using-plugins-in-chrome-extension — Rohan Khajuria, Jul 04 '16 at 07:10

Difficulty Using JavaScript Highlight Plugin

1 Answers1