chore: update editor style (#397)

src/assets/less/style-mirror.less

@@ -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;
-}

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;
+}

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'

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,

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)