CSS Colors coding in the CSS field

Community Usage questions
1

I have written this code in a widget and it works fine.
Did I forget something syntactically or why is the color coding in the css field so different?
Here I have the code

JS{{
  var css = ''
  var allKeyNames = ["C","C#","D","D#","E","F","F#","G","G#","A","A#","B"]
  var k = (VAR{keyNoteNumber} || 0) + 1
  var scale = VAR{scaleJSON} || [0,2,4,5,7,9,11]
  var l = scale.length-1
  css += ".key:nth-child(" + (k) + ") inner {background-color: #cc0000}\n"
  
  for( let i=1; i<=l; i++ ) {
    var outside = (scale[i] + k)
    if (outside > 12) {
      outside = outside -12
    }
    css += '.key:nth-child(' + (outside) + ') inner {background-color: orange}\n'
  }
  css += ".key > inner { border: 1px solid #111}"
  return css
}}

and here how the color coding looks in the css field.

Bildschirmfoto 2023-11-10 um 08.40.07
Bildschirmfoto 2023-11-10 um 08.40.07808×309 32.4 KB

Since I am not so good at coding, it confuses me when the colors are no longer correct. See example:
var k (is white)
var scale (is red)

2

The editor attempts to highlight it as css code an unfortunately it cannot account for the presence of JS{} blocks.
You could at best make it less disturbing by wrarpping most of the code in a css comment block:

/*
JS{
  var css = ''
  var allKeyNames = ["C","C#","D","D#","E","F","F#","G","G#","A","A#","B"]
  var k = (VAR{keyNoteNumber} || 0) + 1
  var scale = VAR{scaleJSON} || [0,2,4,5,7,9,11]
  var l = scale.length-1
  css += ".key:nth-child(" + (k) + ") inner {background-color: #cc0000}\n"
  
  for( let i=1; i<=l; i++ ) {
    var outside = (scale[i] + k)
    if (outside > 12) {
      outside = outside -12
    }
    css += '.key:nth-child(' + (outside) + ') inner {background-color: orange}\n'
  }
  css += ".key > inner { border: 1px solid #111}"
  locals.css = css
}
*/
#{locals.css}
3

Thanks for the fast replay.
It is not disturbing, but for me as a beginner the colors help me to see if I used a wrong syntax or I made a mistake.
But good to know that it doesn't work in the CSS field with a JS{} block.