Made EasyMDE themable (again?).

* The default theme is 'easymde', but can be overridden by options.theme.
* Changed styles to use this theme as selector instead of .CodeMirror.
* Dropped unnecessary .cm-strikethrough styling.
* Added .cm-quote styling.
* Changed .CodeMirror-selected rule to match codemirror.css.
pull/17/head
Martin Blom 6 years ago
parent 7fb35ce968
commit 35b2176bac

@ -31,6 +31,14 @@
width: 50% !important; width: 50% !important;
} }
.CodeMirror-placeholder {
opacity: .5;
}
.CodeMirror-focused .CodeMirror-selected {
background: #d9d9d9;
}
.editor-toolbar { .editor-toolbar {
position: relative; position: relative;
-webkit-user-select: none; -webkit-user-select: none;
@ -262,59 +270,52 @@
padding: 5px; padding: 5px;
} }
.CodeMirror .CodeMirror-code .cm-tag { .cm-s-easymde .cm-tag {
color: #63a35c; color: #63a35c;
} }
.CodeMirror .CodeMirror-code .cm-attribute { .cm-s-easymde .cm-attribute {
color: #795da3; color: #795da3;
} }
.CodeMirror .CodeMirror-code .cm-string { .cm-s-easymde .cm-string {
color: #183691; color: #183691;
} }
.CodeMirror .CodeMirror-selected { .cm-s-easymde .cm-header-1 {
background: #d9d9d9;
}
.CodeMirror .CodeMirror-code .cm-header-1 {
font-size: 200%; font-size: 200%;
line-height: 200%; line-height: 200%;
} }
.CodeMirror .CodeMirror-code .cm-header-2 { .cm-s-easymde .cm-header-2 {
font-size: 160%; font-size: 160%;
line-height: 160%; line-height: 160%;
} }
.CodeMirror .CodeMirror-code .cm-header-3 { .cm-s-easymde .cm-header-3 {
font-size: 125%; font-size: 125%;
line-height: 125%; line-height: 125%;
} }
.CodeMirror .CodeMirror-code .cm-header-4 { .cm-s-easymde .cm-header-4 {
font-size: 110%; font-size: 110%;
line-height: 110%; line-height: 110%;
} }
.CodeMirror .CodeMirror-code .cm-comment { .cm-s-easymde .cm-comment {
background: rgba(0, 0, 0, .05); background: rgba(0, 0, 0, .05);
border-radius: 2px; border-radius: 2px;
} }
.CodeMirror .CodeMirror-code .cm-link { .cm-s-easymde .cm-link {
color: #7f8c8d; color: #7f8c8d;
} }
.CodeMirror .CodeMirror-code .cm-url { .cm-s-easymde .cm-url {
color: #aab2b3; color: #aab2b3;
} }
.CodeMirror .CodeMirror-code .cm-strikethrough { .cm-s-easymde .cm-quote {
text-decoration: line-through; color : #7f8c8d;
} font-style: italic;
.CodeMirror .CodeMirror-placeholder {
opacity: .5;
} }

@ -1581,7 +1581,7 @@ EasyMDE.prototype.render = function (el) {
this.codemirror = CodeMirror.fromTextArea(el, { this.codemirror = CodeMirror.fromTextArea(el, {
mode: mode, mode: mode,
backdrop: backdrop, backdrop: backdrop,
theme: 'paper', theme: (options.theme != undefined) ? options.theme : 'easymde',
tabSize: (options.tabSize != undefined) ? options.tabSize : 2, tabSize: (options.tabSize != undefined) ? options.tabSize : 2,
indentUnit: (options.tabSize != undefined) ? options.tabSize : 2, indentUnit: (options.tabSize != undefined) ? options.tabSize : 2,
indentWithTabs: (options.indentWithTabs === false) ? false : true, indentWithTabs: (options.indentWithTabs === false) ? false : true,

Loading…
Cancel
Save