Ask Your Question

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?

asked 2022-09-17 11:00:00 +0000

bukephalos gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

answered 2022-08-24 04:00:00 +0000

plato gravatar image

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>'}),
    language: 'json'

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

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer

Question Tools


Asked: 2022-09-17 11:00:00 +0000

Seen: 13 times

Last updated: Aug 24 '22