I have a textarea that needs green color for the line that begins with double slash(//).
<textarea id="code-init" spellcheck="false"></textarea>
now I have used following code to attempt what I thought,
document.getElementById("code-init").onkeyup = e => {
if(e.key === '/') {
console.log(e.key)
document.getElementById("code-init").onkeyup = e =>{
if(e.key === '/')
e.target.style.color = "green"
document.getElementById("code-init").onkeyup = e =>{
if(e.key === "Enter")
e.target.style.color = "white"
}
}
}
}
You could simulate an div and insert each letter as span. Callback and check if they include // then traverse the characters to define "a line" and color the spans of the "line"? http://jsbin.com/qinacusuzo/edit?html,output
Or use linear gradient to color the background of the textarea: https://jsfiddle.net/c6hzg08d/
A hard task, maybe worth looking for libraries that help you achieve this.