diff --git a/src/assets/less/style-mirror.less b/src/assets/less/style-mirror.less deleted file mode 100644 index 67a27e9..0000000 --- a/src/assets/less/style-mirror.less +++ /dev/null @@ -1,138 +0,0 @@ -/* - - Name: Base16 Default Light - Author: Chris Kempson (http://chriskempson.com) - - CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror) - Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) - -*/ - -.cm-s-style-mirror.CodeMirror { - color: #444; - font-size: 16px; - line-height: 25px; -} - -.cm-s-style-mirror .CodeMirror-scroll { - padding: 20px; - width: 100%; - box-sizing: border-box; - overflow-x: hidden !important; - overflow-y: scroll !important; -} - -.cm-s-style-mirror div.CodeMirror-selected { - background: #e0e0e0; -} - -.cm-s-style-mirror .CodeMirror-line::selection, -.cm-s-style-mirror .CodeMirror-line > span::selection, -.cm-s-style-mirror .CodeMirror-line > span > span::selection { - background: #e0e0e0; -} - -.cm-s-style-mirror .CodeMirror-line::-moz-selection, -.cm-s-style-mirror .CodeMirror-line > span::-moz-selection, -.cm-s-style-mirror .CodeMirror-line > span > span::-moz-selection { - background: #e0e0e0; -} - -.cm-s-style-mirror .CodeMirror-gutters { - background: #f5f5f5; - border-right: 0px; -} - -.cm-s-style-mirror .CodeMirror-guttermarker { - color: #ac4142; -} - -.cm-s-style-mirror .CodeMirror-guttermarker-subtle { - color: #b0b0b0; -} - -.cm-s-style-mirror .CodeMirror-linenumber { - color: #b0b0b0; -} - -.cm-s-style-mirror .CodeMirror-cursor { - border-left: 1px solid #505050; -} - -.cm-s-style-mirror span.cm-comment { - color: green; -} - -.cm-s-style-mirror span.cm-atom { - color: #aa759f; -} - -.cm-s-style-mirror span.cm-number { - color: #aa759f; -} - -.cm-s-style-mirror span.cm-property, -.cm-s-style-mirror span.cm-attribute { - color: #90a959; -} - -.cm-s-style-mirror span.cm-keyword { - color: #023a52; -} - -.cm-s-style-mirror span.cm-string { - color: #e46918; -} - -.cm-s-style-mirror span.cm-variable { - color: #90a959; -} - -.cm-s-style-mirror span.cm-variable-2 { - color: #00695f; -} - -.cm-s-style-mirror span.cm-variable-3 { - color: #2e6e8a; -} - -.cm-s-style-mirror span.cm-def { - color: #d28445; -} - -.cm-s-style-mirror span.cm-bracket { - color: #202020; -} - -.cm-s-style-mirror span.cm-tag { - color: #000; -} - -.cm-s-style-mirror span.cm-link { - color: #b26a00; -} - -.cm-s-style-mirror span.cm-error { - /* background: #ac4142; - color: #f5f5f5; */ - text-decoration: underline; - text-decoration-style: wavy; - text-decoration-color: #df8d8e; -} - -.cm-s-style-mirror .CodeMirror-activeline-background { - background: #dddcdc; -} - -.cm-s-style-mirror .CodeMirror-matchingbracket { - color: rgb(32, 32, 32) !important; - background-color: rgba(0, 0, 0, 0.1) !important; -} - -.cm-em { - font-style: normal; -} - -.cm-comment { - font-style: normal !important; -} diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less index d6f635a..8592b7e 100644 --- a/src/assets/less/theme.less +++ b/src/assets/less/theme.less @@ -46,15 +46,7 @@ } } - .cm-s-style-mirror .CodeMirror-matchingbracket { - color: @nightWhiteColor !important; - background: rgb(30, 30, 30) !important; - } - .cm-s-xq-light span.cm-variable-2, - .cm-s-style-mirror span.cm-tag { - color: @nightFontColor; - } .cm-s-xq-light .CodeMirror-activeline-background { background-color: transparent; @@ -103,3 +95,11 @@ padding-bottom: 20px; box-sizing: border-box; } + +.cm-em { + font-style: normal; +} + +.cm-comment { + font-style: normal !important; +} diff --git a/src/main.js b/src/main.js index fdc6b30..1375836 100644 --- a/src/main.js +++ b/src/main.js @@ -10,7 +10,6 @@ import 'codemirror/theme/xq-light.css' /* 每个页面公共css */ import '@/assets/index.css' import '@/assets/less/theme.less' -import '@/assets/less/style-mirror.less' import 'codemirror/mode/css/css' import 'codemirror/mode/markdown/markdown' diff --git a/src/stores/index.js b/src/stores/index.js index 711f1a8..b8a9317 100644 --- a/src/stores/index.js +++ b/src/stores/index.js @@ -188,8 +188,9 @@ export const useStore = defineStore(`store`, () => { cssEditor.value = markRaw( CodeMirror.fromTextArea(cssEditorDom, { mode: `css`, - theme: `style-mirror`, + theme: `xq-light`, lineNumbers: false, + styleActiveLine: true, lineWrapping: true, matchBrackets: true, autofocus: true, diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue index 6015029..694acda 100644 --- a/src/views/CodemirrorEditor.vue +++ b/src/views/CodemirrorEditor.vue @@ -30,8 +30,6 @@ import { toBase64, } from '@/utils' -import 'codemirror/mode/javascript/javascript' - const store = useStore() const { output, editor, editorContent, isShowCssEditor } = storeToRefs(store)