Highlighty Base Script Fiddle

by Stephen Wu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget placerat velit, eget condimentum urna. Maecenas ut ligula auctor, iaculis elit vel, accumsan libero. Vestibulum nulla velit, vehicula vel efficitur in, egestas ut urna. Sed aliquet
  quam id enim lobortis, a accumsan nunc interdum. Integer scelerisque lacinia odio, vel euismod sapien feugiat sit amet. In nunc urna, aliquet et pretium vel, condimentum sed risus. Cras iaculis urna lorem, et faucibus mauris sollicitudin dignissim.
  Aliquam gravida augue nec orci blandit rhoncus. Nunc porta, nisi a luctus ullamcorper, elit nunc pharetra turpis, quis bibendum nunc arcu non mi. Sed cursus lacus diam, ac fermentum diam vestibulum quis. Vivamus pellentesque cursus orci, id maximus
  quam. Duis lobortis neque accumsan turpis posuere ullamcorper. Duis quis bibendum quam, quis faucibus purus. Aliquam non placerat libero. Suspendisse aliquet nisi velit, non imperdiet felis sodales vel. Donec placerat rutrum ligula, a lobortis enim
  scelerisque sed.
</p>
<button>A button element</button>

JavaScript

let highlighter = [
{
  title: "Latin words",
  phrases: ["Lorem ipsum", "vestibulum nulla", "elit"],
  color: "green"  
},
{
  title: "Some other latin words",
  phrases: ["sit", "amet", "in", "nunc"],
  color: "#ba3030"  
}];

const highlightWords = () => {
  let highlighterStyles = "<style>";
  for (let index in highlighter) { // We use `in` insead of `of` to get the indices
    const highlighterClass = `highlighter-${index}`;
    highlighterStyles += `.${highlighterClass} { background-color: ${highlighter[index].color}; } `;
    $("body").mark(highlighter[index].phrases, {   
      className: highlighterClass,   
      separateWordSearch: false
    });
  }
	highlighterStyles += "</styles>";
  $("head").append(highlighterStyles);
}

$(window).keydown((e) => {
  if (e.keyCode == 117 ) { //F6
    event.preventDefault(); 
    highlightWords();
  }
});