Окраска содержимого тега textarea в формате JSON (с цветами)

У меня есть приложение Angular, в этом приложении у меня есть текстовая область, в которую я всегда буду писать текст в формате JSON, я хочу, чтобы это было в тот же момент, когда я пишу в этой текстовой области, в случае, если json действителен, я хочу текст должен быть красочным (ключ с цветом и значение с другим цветом) (это что-то похожее на Postman при написании JSON).

Что я пробовал на данный момент :
HTML:

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

Машинопись:

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: я пробовал использовать Ngx-monaco, но не получилось из-за других ошибок.