codemirror-textarea resizable like a standard textarea

WITHOUT JQUERY , CSS only

.CodeMirror {
      resize: vertical;
      overflow: auto !important;
    }

After some struggle, this simple code actually worked for me. I got a resizable Codemirror Instance vertically with scroll working properly.


Some Googling suggests that it is not supported in CodeMirror but you can achieve it with jQuery UI:

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
});
$('.CodeMirror').resizable({
  resize: function() {
    editor.setSize($(this).width(), $(this).height());
  }
});

I made this little example.

Note that this resizes vertically only, which is probably what you really want? The horizontal resize ability of a normal textarea tends to break layouts - it's usually much easier to come up with a layout where the editor has a fixed width and the content below it gets pushed down if you resize.

I haven't seen the design in which you intend for this to fit, so I'm guessing.

It shouldn't be too hard to modify this and get a working resize widget that works in both directions though, if that's what you wanted.

Alternatively, consider trying this plugin by @Sphinxxx which was derived from this example.