How do you make a caste light of js test?

[esther]

The codemirror libraries highlight the text for certain languages, but there is no way to indicate their caste rules for lighting, and I wish to highlight the non-closed brackets in mathematical terms.

[Anderson]

Try it. https://prismjs.com/ ♪

A fresh solution to pressing problems. There's only a 2cb code in the basic version. Works without a single dependence. Support https://prismjs.com/#supported-languages ♪

Expanded https://prismjs.com/#plugins ♪

https://prismjs.com/plugins/match-braces/ Also available.

const plain = document.documentElement.outerHTML;
code.innerHTML = plain.replace(/</g,'&lt;').replace(/>/g,'&gt;');

[contenteditable] {
  outline: 0px solid transparent;
}
.brace-hover { transform: scale(2); 
               transition: all 0.5s; 
               position:relative; 
               display: inline-block; }

{ font-size: 0.85rem; }

<!-- CSS PRISM -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css"/>

<!-- CSS MATCH BRACES -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/match-braces/prism-match-braces.min.css"/>
<!-- JS PRISM -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<!-- JS MATCH BRACES -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/match-braces/prism-match-braces.min.js"></script>
<!-- CODE BLOCK -->

<pre>

<code id="code"

contenteditable="true"

class="lang-html match-braces rainbow-braces">
</code>

</pre>