How to set height to 100%

[thdoan]

I'm using the basic setup from the README, and it's looking good:

const codeEditor = basicEditor(
  '#code-editor',
  {
    language: 'javascript',
    theme: 'vs-code-dark',
  },
  () => console.log('ready!')
);

However, it only shows one line:

Is there an option to set the height to 100%? I can't override the CSS for .prism-code-editor because it's in a shadowroot.

[thdoan]

Is my only option to use the advanced setup? https://github.com/FIameCaster/prism-code-editor?tab=readme-ov-file#advanced-usage

[jonpyt]

Try adding display: grid to #code-editor. Now the editor's height will match the container. If the editor's content grows taller than the container, it will begin scrolling too. Without display: grid it will overflow out of the container instead of scrolling.

[thdoan]

Thanks, this fixed it. While you're at it, maybe you can help with this: I'm moving from CodeJar and trying to replicate these two features and so far unsuccessful:

1. I'd like to be able to programmatically disable syntax highlighting when plain text is added to the code editor. In CodeFlask, I could easily add a plain-text class to disable syntax highlighting. I was able to make this work by dynamically setting language: 'text' for plain text.
2. I'd like to put the caret inside the editor after it is rendered (at the end of the text). There was a hack to do this in CodeJar, but I'm not sure how to do this in this editor.