ASP.NET | Jquery | Web Dev (.NET, HTML, etc)

CodeMirror basics

Challenge:

In our web application, we do provide HTML/CSS/JS editing functionality. We wanted to provide Syntax Highlighting feature for that, and after doing bit of our research we finalized to use:
Code Mirror — http://codemirror.net/  It’s just awesome!
We implemented and incorporated it with our application, and it was working fine, with FF, Chrome. But but here comes IE — (I know we all face lot of challenges with IE), it was causing following issues:

  1. Scroll bar flickering
  2. When we type anything it moves it’s position

What, you are also facing the same problem? Our solution might work with you as well

Solution:

After Investing a lot of time, we found that our page’s DOCTYPE was enforcing our page to run in Quirks mode, and CodeMirror and Quirks mode — are enemies! 🙂
See following excerpt from [Supported browsers section] : http://codemirror.net/

The following desktop browsers are able to run CodeMirror:

  • Firefox 3 or higher
  • Chrome, any version
  • Safari 5.2 or higher
  • Opera 9 or higher (with some key-handling problems on OS X)
  • Internet Explorer 8 or higher
  • Internet Explorer 7 (standards mode) is usable, but buggy. It has a z-index bug that prevents CodeMirror from working properly.

Note that CodeMirror is only supported in standards mode. So not quirks mode, but also not the quasi-standards mode that IE gives you when you specify a transitional doctype. Simply using the HTML5-style <!--doctype html> is recommended.

Now, the solution is simple, just change DOCTYPE to standards mode and you are done! But “life is not as easy as it seems to be” 🙂
Because if your application’s UI has been designed as per quirks mode than you can’t change it directly, Because it might make your CodeMirror working. But can break N number of things!
Don’t worry, we got a solution for you!
In our case our CodeMirror editor was in an I-Frame and using this trick, we resolved it! — http://stackoverflow.com/questions/5391495/can-i-have-doctype-in-iframe-different-from-hosting-page
Basically, change the DOCTYPE of your I-Framed page, and you are done!
Happy Coding! 🙂