How can the unformatted HTML code be converted into easily readable text with syntax highlighting when it is being used as a value for a Monaco editor with JSON language?

edit

To convert the unformatted HTML code into easily readable text with syntax highlighting, you can use a JS library called PrismJS. Here are the steps to achieve this:

1. Install PrismJS library into your project:

npm install prismjs --save

1. Import PrismJS and the desired language module into your component:

import Prism from 'prismjs';
import 'prismjs/components/prism-json';

1. Parse the HTML code using PrismJS inside the Monaco editor:

monaco.editor.create(document.getElementById('container'), {
    value: Prism.highlight(
      JSON.stringify({html: '<div>Hello, World!</div>'}),
      Prism.languages.json,
      'json'
    ),
    language: 'json'
})

This will highlight the syntax of your HTML code within the JSON language and make it more readable.