Search code examples
javascripthtmlcsscodemirror

Codemirror displaying incorrectly due to CSS

My CSS code is causing Codemirror to display incorrectly. See below:

Screenshot

How can I prevent my styles from affecting the elements created by Codemirror so that Codemirror will display correctly?

Even if I manage to tweak my CSS code so that both my page and Codemirror display correctly, it will be a nightmare in the future because any future styles may affect Codemirror. Also my CSS file is generated dynamically depending on values given by the client, which further complicates things.

One possible solution is to create a class called not-codemirror and apply it to every single element on my site, other than elements for Codemirror. This seems like overkill to me, especially considering most pages will not be using Codemirror. All pages share the same CSS file.

Also, I would prefer a non-jQuery solution, if possible. Thanks

EDIT

I now have it displaying as this:

enter image description here

It should look like this:

enter image description here

I added:

display: inline;
margin: 0;
padding: 0;

to .CodeMirror span in codemirror.css.

Solution

  • Codemirror markup has a specific class .CodeMirror (at least in latest version it's present);

    So if you want other styles not to clash you can use .not :

    clashing-selector:not(.CodeMirror)