search

sparksuite / simplemde-markdown-editor

A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://simplemde.com
MIT License
9.79k stars 1.12k forks source link

Default CodeMirror themes merged with application styles #318

Open matthanley opened 8 years ago

matthanley commented 8 years ago

Default CodeMirror themes are overridden by the CSS distributed with SMDE. A more flexible approach would be to implement a separate theme for CodeMirror in the distributed CSS and set this theme on the CodeMirror instance by default.

SvenAlHamad commented 8 years ago

I agree ... I also have the issue where SMDE theme overwrites my CodeMirror theme:

Before SMDE is added: screen shot 2016-05-19 at 20 25 45

After SMDE is added: screen shot 2016-05-19 at 20 28 03

Basically just by wrapping the SMDE into its own element with a common class, e.g. .smde you can then change the selectors in the SMDE css from this .CodeMirror .CodeMirror-code .cm-header-3 into .smde .CodeMirror .CodeMirror-code .cm-header-3 which will sort out any conflicts amongst themes.

UPDATE: Just tested my theory and can confirm it's working as expected. Here is the end result, CodeMirror and SMDE side-by-side on the same page: screen shot 2016-05-19 at 20 41 37

UPDATE no.2: Seems there are still some conflicts, but on the code level ... SMDE somehow overwrites the CodeMirror configuration in a way that it doesn't include all the modes. You can see from my previous screen that the theme looks good, but the highlighting on css code doesn't work, while when I remove SMDE, the highlight is working properly.

WesCossick commented 8 years ago

Probably something that would be good for the future version 2 redesign.