diff --git a/README.md b/README.md index 8e607a0..a624f55 100644 --- a/README.md +++ b/README.md @@ -185,6 +185,7 @@ simplemde.value("This text will appear in the editor"); - **styleSelectedText**: If set to `false`, remove the `CodeMirror-selectedtext` class from selected lines. Defaults to `true`. - **syncSideBySidePreviewScroll**: If set to `false`, disable syncing scroll in side by side mode. Defaults to `true`. - **tabSize**: If set, customize the tab size. Defaults to `2`. +- **theme**: Override the theme. Defaults to `easymde`. - **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons). - **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`. diff --git a/src/css/easymde.css b/src/css/easymde.css index 3aa3c9e..0a80ff0 100644 --- a/src/css/easymde.css +++ b/src/css/easymde.css @@ -31,6 +31,14 @@ width: 50% !important; } +.CodeMirror-placeholder { + opacity: .5; +} + +.CodeMirror-focused .CodeMirror-selected { + background: #d9d9d9; +} + .editor-toolbar { position: relative; -webkit-user-select: none; @@ -262,59 +270,52 @@ padding: 5px; } -.CodeMirror .CodeMirror-code .cm-tag { +.cm-s-easymde .cm-tag { color: #63a35c; } -.CodeMirror .CodeMirror-code .cm-attribute { +.cm-s-easymde .cm-attribute { color: #795da3; } -.CodeMirror .CodeMirror-code .cm-string { +.cm-s-easymde .cm-string { color: #183691; } -.CodeMirror .CodeMirror-selected { - background: #d9d9d9; -} - -.CodeMirror .CodeMirror-code .cm-header-1 { +.cm-s-easymde .cm-header-1 { font-size: 200%; line-height: 200%; } -.CodeMirror .CodeMirror-code .cm-header-2 { +.cm-s-easymde .cm-header-2 { font-size: 160%; line-height: 160%; } -.CodeMirror .CodeMirror-code .cm-header-3 { +.cm-s-easymde .cm-header-3 { font-size: 125%; line-height: 125%; } -.CodeMirror .CodeMirror-code .cm-header-4 { +.cm-s-easymde .cm-header-4 { font-size: 110%; line-height: 110%; } -.CodeMirror .CodeMirror-code .cm-comment { +.cm-s-easymde .cm-comment { background: rgba(0, 0, 0, .05); border-radius: 2px; } -.CodeMirror .CodeMirror-code .cm-link { +.cm-s-easymde .cm-link { color: #7f8c8d; } -.CodeMirror .CodeMirror-code .cm-url { +.cm-s-easymde .cm-url { color: #aab2b3; } -.CodeMirror .CodeMirror-code .cm-strikethrough { - text-decoration: line-through; -} - -.CodeMirror .CodeMirror-placeholder { - opacity: .5; +.cm-s-easymde .cm-quote { + color: #7f8c8d; + font-style: italic; } diff --git a/src/js/easymde.js b/src/js/easymde.js index 4b475d0..a8cb1af 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -1581,7 +1581,7 @@ EasyMDE.prototype.render = function (el) { this.codemirror = CodeMirror.fromTextArea(el, { mode: mode, backdrop: backdrop, - theme: 'paper', + theme: (options.theme != undefined) ? options.theme : 'easymde', tabSize: (options.tabSize != undefined) ? options.tabSize : 2, indentUnit: (options.tabSize != undefined) ? options.tabSize : 2, indentWithTabs: (options.indentWithTabs === false) ? false : true,