JSFiddle - React, Tailwind, and code Playground

HTML

<textarea cols=40>if True: print("hello")</textarea>
<pre>if False: print("bye")</pre>

CSS

::highlight(function) { color: red }

JavaScript

var area = document.querySelector("textarea");
var pre = document.querySelector("pre");
var areatext = area.childNodes[0];
var pretext = pre.childNodes[0];
var print1 = new Range();
print1.setStart(areatext, 9);
print1.setEnd(areatext, 14);
var print2 = new Range();
print2.setStart(pretext, 10);
print2.setEnd(pretext, 15);
CSS.highlights.set('function', new Highlight(print1, print2));
console.log("textarea has child node: ", areatext.toString());
console.log("pre has child node: ", pretext.toString());