TheGuyWhoCodes TheGuyWhoCodes - 4 months ago 18
CSS Question

Styling separate arrays of words in mark.js?

So I have a list of words that I'm using, one list is a good list, one a bad list, and one a neutral list. I've been highlighting the good list with mark.js and styling it green with the .css method. If I highlight the bad list and the neutral list, it would also turn green. Is there a way that I can color the bad one red, good one green, and neutral grey?

var instance = new Mark(document.querySelector("#postingbody"));
instance.mark(positive, {
accuracy: "exactly",
separateWordSearch: false
});
var instance = new Mark(document.querySelector("#postingbody"));
instance.mark(bad, {
accuracy: "exactly",
separateWordSearch: false
});
var instance = new Mark(document.querySelector("#postingbody"));
instance.mark(neutral, {
accuracy: "exactly",
separateWordSearch: false
});


The code adds a to all words it highlights, so right now the code that I use to highlight it is:

$('mark').css({'background':'transparent' , 'color':'red'});


And the text I want to highlight would just be:

<div id = "postingbody">
hey I'm some text I wanna highlight
</div>

Answer

Inside your mark() method parameters you can specify a CSS class name like in the code below:

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

You can create your CSS class like this:

.green {
  color: rgb(0, 255, 0);
  background: transparent;
}
Comments