Include a div/textarea "keywords" property!

Include a div/textarea "keywords" property!

javascript can be used to build a code editor to edit javascript!
One useful aspect of a code editor is, of course, stylized syntax-highlighting with color and line numbering, which are difficult still to implement using HTML/javascript: These require multiple contenteditable divs or textarea overlays with added keypress eventlisteners

This can however be simplified with the use of a div.keywords array property!

The property could enable automatic line numbering, and further customizations via CSS tags

Example

div.keywords = ["var","let","with","in","of","for"] 
div.innerText = "let x = 100;\nlet y = 200;"
.
.
.
div.innerHTML; // "<div style='keyword lineNUMBER'>.1 <div style='keyword let'>let</div> x = 100;</div><div style='keyword lineNUMBER'>2. <div style='keyword let'>let</div> y = 200;"
// or...
div.innerHTML; // "<lineNUMBER>1. <keyword><let>let</let></keyword> x = 100;</lineNUMBER><lineNUMBER>2. <keyword><let>let</let></keyword> y = 200;</lineNUMBER>"

divs and textareas are part of HTML, not the JS language, so this wouldn't be the appropriate place to suggest it. See https://participate.whatwg.org

1 Like

For those interested, you can follow the proposal at WHATWG dot ORG

Current Proposal
Include a div/textarea "keywords" property! - (proposed) 2020 HTML Standard

Main contributions
WHATWG.ORG on GIT HUB