Making the editor N lines high by default

In a freshly created editor, there’s only one line. How can I make an editor always show at least N lines? (for example, N = 10)

Would showing the editor at full screen height helps?

I know it doesn’t solve your problem here, but maybe you just not want the initial single line editor.

I’m embedding a code editor in the middle of a page (like on a problem-solving service – Leetcode/Codewars/etc.). I don’t like how it starts with just one line:


Instead, I want it to show at least 10 numbered lines:

…but without literally placing 10 \n's in the code.
Hopefully that makes sense.

Found this thread: CodeMirror 6: Setting a minimum height but allow the editor to grow , that’s pretty much what I wanted. Perhaps without the line numbers, but it’s not that important.

This is the theme that worked for me:

  const theme = EditorView.theme({
    '.cm-activeLine': {
      backgroundColor: 'var(--codemirror-active-line)',
    },
    '.cm-content': {
      height: 'var(--codemirror-height)',
    },
    '.cm-scroller': {
      overflow: 'hidden',
    },
    '.cm-wrap': {
      height: 'var(--codemirror-height)',
      border: '1px solid silver',
    },
  });

Found this thread: Making the editor N lines high by default ,

That link redirects to this post.

Glad you got it worked out.
And yes you can remove the line numbers extension, if you use @codemirror/basic-setup, you can basically duplicate it and remove just the line numbers extension.

Oops, fixed the link

I meant that the line numbers aren’t extended down. Which is fine:


I still want them where they are now, though

I don’t think you can specify the height as N lines directly. It requires the editor to be loaded, so that you can make measurements and figure out how tall that N lines would be.