My CMS lets me render different components depending on whether a block is being edited or displayed. So my code-block component is set up to use the Monaco editor while editing (the same editor that's in VS code) and a regular <code> tag with Prism highlighting while displaying.

This means I can have full code completion while authoring my posts, without having to force my readers (me, myself and I) to download 10MB of Monaco editor when they are just trying to view a post.

export function NewCodeElement () {
  return {
    type: "code",
    language: "typescript",
  }
}

console.log(NewCodeElement().language)

Here's a screenshot of what editing that code snippet looks like in the backend

My code-block component