Html 将文本区域标签的内容着色为SON(带有 colored颜色 )

I have an Angular application , in this app , i have a text area that i will always write json text to it , what i want is at the same moment that i am writing in this textarea , in case the json is valid, i want the text to be colorfull ( Key with a color and value with another color)(this is something similair to Postman when writing JSON ) .

What i have tried so far :
HTML:

` <textarea
     pInputText
     placeholder="required name and schemaJson object"
     formControlName="schema"
     id="schema" rows="10" cols="50" required
     (input)="updateTextColor($event.target.value)">
                        </textarea>````

TypeScript:

updateTextColor(text: string): void {
    try {
      const jsonObject = JSON.parse(text);
      const coloredText = this.colorizeJSON(jsonObject);
      document.getElementById('schema').innerHTML = coloredText;
    } catch (error) {
      // If JSON parsing fails, keep the text as is
      document.getElementById('schema').innerText = text;
    }
  }

  colorizeJSON(obj: any): string {
    let coloredText = '';
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        coloredText += `<span class="json-key">${key}</span>: `;
        if (typeof obj[key] === 'object') {
          coloredText += this.colorizeJSON(obj[key]);
        } else {
          coloredText += `<span class="json-value">${obj[key]}</span>`;
        }
        coloredText += ', ';
      }
    }
    // Remove trailing comma and return
    return coloredText.replace(/,\s*$/, '');
  }

PS:我try 过使用Ngx-monaco，但由于其他错误而失败'