I agree with MusikAnimal that you may need to use the jQuery.textSelection module, which is also documented here: https://www.mediawiki.org/wiki/Extension:CodeMirror#JavaScript_integration

Please try adding a white space in between.

Thank you for fixing this!

Likely to be related with T108455 and its solution.

I am only commenting on the attached screenshot. .CodeMirror-scroll overflowing is not a bug. The question is whether .CodeMirror overflows.

Got it. Thank you for your reply!

Based on my understanding of this extension, the real-time syntax highlighting, or CodeMirror, works very different from the backend PHP parser. Furthermore, it can be costly to "look ahead" in CodeMirror, which simply means getting information from the next few lines (reference).

This is the same bug as T298488, which has been resolved.

In T197632#7768780, @matmarex wrote:

With the patch by @Bhsd, you can just register the 'focus'/'blur' handlers on #wpTextbox1, and they will be triggered whenever the user focuses/blurs the CodeMirror editor.

In T303232#7768776, @TZubiri wrote:

One naïve solution in the parsing would be to fail early if the first argument (name of the template) doesn't look like the name of a known template, ...

To some extent, this performance issue is a side effect of the solution to T174480. In usual use cases of CodeMirror, the browser will only render a finite viewport instead of hundreds of lines of code.

There is no wikiEditor loaded for readonly text areas (please refer to T41577 for more information), which means there is currently no icon button to switch on/off CodeMirror.