文本区域，可以做语法高亮在飞行?

var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('textarea');
var $toggle = $('button');




var ua = window.navigator.userAgent.toLowerCase();
var isIE = !!ua.match(/msie|trident\/7|edge/);
var isWinPhone = ua.indexOf('windows phone') !== -1;
var isIOS = !isWinPhone && !!ua.match(/ipad|iphone|ipod/);


function applyHighlights(text) {
text = text
.replace(/\n$/g, '\n\n')
.replace(/[A-Z].*?\b/g, '<mark>$&</mark>');


if (isIE) {
// IE wraps whitespace differently in a div vs textarea, this fixes it
text = text.replace(/ /g, ' <wbr>');
}


return text;
}


function handleInput() {
var text = $textarea.val();
var highlightedText = applyHighlights(text);
$highlights.html(highlightedText);
}


function handleScroll() {
var scrollTop = $textarea.scrollTop();
$backdrop.scrollTop(scrollTop);


var scrollLeft = $textarea.scrollLeft();
$backdrop.scrollLeft(scrollLeft);
}


function fixIOS() {
$highlights.css({
'padding-left': '+=3px',
'padding-right': '+=3px'
});
}


function bindEvents() {
$textarea.on({
'input': handleInput,
'scroll': handleScroll
});
}


if (isIOS) {
fixIOS();
}


bindEvents();
handleInput();

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*,
*::before,
*::after {
box-sizing: border-box;
}


body {
margin: 30px;
background-color: #fff;
caret-color: #000;
}


.container,
.backdrop,
textarea {
width: 460px;
height: 180px;
}


.highlights,
textarea {
padding: 10px;
font: 20px/28px 'Open Sans', sans-serif;
letter-spacing: 1px;
}


.container {
display: block;
margin: 0 auto;
transform: translateZ(0);
-webkit-text-size-adjust: none;
}


.backdrop {
position: absolute;
z-index: 1;
border: 2px solid #685972;
background-color: #fff;
overflow: auto;
pointer-events: none;
transition: transform 1s;
}


.highlights {
white-space: pre-wrap;
word-wrap: break-word;
color: #000;
}


textarea {
display: block;
position: absolute;
z-index: 2;
margin: 0;
border: 2px solid #74637f;
border-radius: 0;
color: transparent;
background-color: transparent;
overflow: auto;
resize: none;
transition: transform 1s;
}


mark {
border-radius: 3px;
color: red;
background-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="backdrop">
<div class="highlights"></div>
</div>
<textarea>All capitalized Words will be highlighted. Try Typing to see how it Works</textarea>
</div>