From 5f06d0e497845ac4e8a9959f33107fa11593939b Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Sat, 15 Aug 2020 11:35:36 +0800
Subject: [PATCH 01/14] removed spell check

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/components/problem/submit.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/problem/submit.vue b/src/components/problem/submit.vue
index 1cdfc394..15273062 100644
--- a/src/components/problem/submit.vue
+++ b/src/components/problem/submit.vue
@@ -38,6 +38,7 @@
             placeholder="Paste your code"
             required
             v-model="code"
+            spellcheck="false"
           />
         </el-card>
       </el-col>
@@ -68,6 +69,7 @@
           placeholder="Paste your code"
           required
           v-model="code"
+          spellcheck="false"
         />
       </el-card>
     </div>

From 9a4e9a567281794594a59babbd200d7a63ffba3f Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
Date: Sat, 15 Aug 2020 12:10:52 +0800
Subject: [PATCH 02/14] store

Signed-off-by: zhangtianli2006 <49156174+zhangtianli2006@users.noreply.github.com>
---
 src/components/lib/editor.vue | 19 +++++++++++---
 src/sfconfig.js               | 49 +++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/components/lib/editor.vue b/src/components/lib/editor.vue
index 3935d16e..156a99e2 100644
--- a/src/components/lib/editor.vue
+++ b/src/components/lib/editor.vue
@@ -1,10 +1,19 @@
 <template>
   <div>
+    <el-select v-model="value" placeholder="请选择">
+      <el-option
+        v-for="item in langTable"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-select>
     <textarea ref="editor" v-model="source" />
   </div>
 </template>
 
 <script>
+import sfconfig from './../../sfconfig';
 import * as CodeMirror from 'codemirror/lib/codemirror';
 import 'codemirror/lib/codemirror.css';
 import './../../assets/code_mirror/tomorrow.css';
@@ -37,12 +46,14 @@ export default {
   name: 'codeMirror',
   data() {
     return {
-      source: null
+      source: null,
+      langTable: sfconfig.codeMirrorModeTable,
+      editor: null
     };
   },
   methods: {
     loadEditor() {
-      let editor = CodeMirror.fromTextArea(this.$refs.editor, {
+      this.editor = CodeMirror.fromTextArea(this.$refs.editor, {
         theme: '3024-day',
         mode: 'text/x-c++src',
         indentUnit: 4,
@@ -69,8 +80,8 @@ export default {
           completeSingle: false
         }
       });
-      editor.on('keypress', function() {
-        editor.showHint();
+      this.editor.on('keypress', function() {
+        this.editor.showHint();
       });
     }
   },
diff --git a/src/sfconfig.js b/src/sfconfig.js
index 48248087..c74cfa75 100644
--- a/src/sfconfig.js
+++ b/src/sfconfig.js
@@ -68,5 +68,54 @@ export default {
     value: '18',
     label: 'Java'
   }],
+  codeMirrorModeTable: [{
+    value: '0',
+    label: 'C++',
+    mode: 'text/x-c++src'
+  }, {
+    value: '1',
+    label: 'C',
+    mode: 'text/x-csrc'
+  }, {
+    value: '2',
+    label: 'JAVA',
+    mode: 'text/x-java'
+  }, {
+    value: '3',
+    label: 'C#',
+    mode: 'text/x-csharp'
+  }, {
+    value: '4',
+    label: 'Rust',
+    mode: 'text/x-rustsrc'
+  }, {
+    value: '5',
+    label: 'TypeScript',
+    mode: 'text/typescript'
+  }, {
+    value: '6',
+    label: 'Python3',
+    mode: 'text/x-python'
+  }, {
+    value: '7',
+    label: 'Markdown',
+    mode: 'text/x-markdown'
+  }, {
+    value: '8',
+    label: 'Ruby',
+    mode: 'text/x-ruby'
+  }, {
+    value: '9',
+    label: 'php',
+    mode: 'text/x-php'
+  }, {
+    value: '10',
+    label: 'GO',
+    mode: 'text/x-go'
+  }, {
+    value: '11',
+    label: 'Pascal',
+    mode: 'text/x-pascal'
+  }],
   captchaKeyMax: 2000000000
 };

From b26165647be74e5bcb4ef283ff3896e405a2fde2 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sat, 15 Aug 2020 20:27:52 +0800
Subject: [PATCH 03/14] add language select for code mirror

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/components/lib/editor.vue | 35 +++++++++++++++-----
 src/sfconfig.js               | 61 +++++++++++++++++++++++------------
 2 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/src/components/lib/editor.vue b/src/components/lib/editor.vue
index 156a99e2..44b3fd37 100644
--- a/src/components/lib/editor.vue
+++ b/src/components/lib/editor.vue
@@ -1,12 +1,16 @@
 <template>
   <div>
-    <el-select v-model="value" placeholder="请选择">
+    <el-select
+      v-model="mode"
+      placeholder="Select Mode"
+      style="margin-bottom: 10px;"
+    >
       <el-option
         v-for="item in langTable"
         :key="item.value"
         :label="item.label"
-        :value="item.value">
-      </el-option>
+        :value="item.value"
+      />
     </el-select>
     <textarea ref="editor" v-model="source" />
   </div>
@@ -18,6 +22,10 @@ import * as CodeMirror from 'codemirror/lib/codemirror';
 import 'codemirror/lib/codemirror.css';
 import './../../assets/code_mirror/tomorrow.css';
 import 'codemirror/mode/clike/clike';
+import 'codemirror/mode/rust/rust';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/python/python';
+import 'codemirror/mode/markdown/markdown';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/hint/show-hint.css';
 import 'codemirror/addon/hint/anyword-hint';
@@ -42,20 +50,28 @@ import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/search/match-highlighter';
 import 'codemirror/keymap/sublime';
 
+let editor;
+
 export default {
   name: 'codeMirror',
   data() {
     return {
       source: null,
       langTable: sfconfig.codeMirrorModeTable,
-      editor: null
+      editor: null,
+      mode: '-'
     };
   },
+  watch: {
+    mode(val) {
+      editor.setOption('mode', this.langTable[val].mode);
+    }
+  },
   methods: {
     loadEditor() {
-      this.editor = CodeMirror.fromTextArea(this.$refs.editor, {
+      editor = CodeMirror.fromTextArea(this.$refs.editor, {
         theme: '3024-day',
-        mode: 'text/x-c++src',
+        mode: 'text/x-markdown',
         indentUnit: 4,
         smartIndent: true,
         indentWithTabs: false,
@@ -80,13 +96,16 @@ export default {
           completeSingle: false
         }
       });
-      this.editor.on('keypress', function() {
-        this.editor.showHint();
+      editor.on('keypress', function() {
+        editor.showHint();
       });
     }
   },
   mounted() {
     this.loadEditor();
+    this.mode = this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].label;
+    console.log(this.mode);
+    editor.setOption('mode', this.langTable[this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].value].mode);
   }
 };
 </script>
diff --git a/src/sfconfig.js b/src/sfconfig.js
index c74cfa75..2f08916e 100644
--- a/src/sfconfig.js
+++ b/src/sfconfig.js
@@ -1,6 +1,6 @@
 export default {
   api: {
-    server: 'http://backend.soj.szdytom.tk/api'
+    server: 'http://localhost:8000/api'
   },
   markdown: {
     gfm: true,
@@ -12,61 +12,80 @@ export default {
   },
   langTable: [{
     value: '0',
-    label: 'C++'
+    label: 'C++',
+    codeMirror: '0'
   }, {
     value: '1',
-    label: 'C++11'
+    label: 'C++11',
+    codeMirror: '0'
   }, {
     value: '2',
-    label: 'C++14'
+    label: 'C++14',
+    codeMirror: '0'
   }, {
     value: '3',
-    label: 'C++17'
+    label: 'C++17',
+    codeMirror: '0'
   }, {
     value: '4',
-    label: 'C++20'
+    label: 'C++20',
+    codeMirror: '0'
   }, {
     value: '5',
-    label: 'C'
+    label: 'C',
+    codeMirror: '1'
   }, {
     value: '6',
-    label: 'C#'
+    label: 'C#',
+    codeMirror: '3'
   }, {
     value: '7',
-    label: 'Clang'
+    label: 'Clang',
+    codeMirror: '0'
   }, {
     value: '8',
-    label: 'Clang11'
+    label: 'Clang11',
+    codeMirror: '0'
   }, {
     value: '9',
-    label: 'Clang14'
+    label: 'Clang14',
+    codeMirror: '0'
   }, {
     value: '10',
-    label: 'Clang17'
+    label: 'Clang17',
+    codeMirror: '0'
   }, {
     value: '11',
-    label: 'Clang20'
+    label: 'Clang20',
+    codeMirror: '0'
   }, {
     value: '12',
-    label: 'Rust'
+    label: 'Rust',
+    codeMirror: '4'
   }, {
     value: '13',
-    label: 'Python2'
+    label: 'Python2',
+    codeMirror: '6'
   }, {
     value: '14',
-    label: 'Python3'
+    label: 'Python3',
+    codeMirror: '6'
   }, {
     value: '15',
-    label: 'Pascal'
+    label: 'Pascal',
+    codeMirror: '11'
   }, {
     value: '16',
-    label: 'Go'
+    label: 'Go',
+    codeMirror: '10'
   }, {
     value: '17',
-    label: 'Ruby'
+    label: 'Ruby',
+    codeMirror: '8'
   }, {
     value: '18',
-    label: 'Java'
+    label: 'Java',
+    codeMirror: '2'
   }],
   codeMirrorModeTable: [{
     value: '0',
@@ -94,7 +113,7 @@ export default {
     mode: 'text/typescript'
   }, {
     value: '6',
-    label: 'Python3',
+    label: 'Python',
     mode: 'text/x-python'
   }, {
     value: '7',

From 3ac9e9036724bf2160215f4745a231a892b8ad4f Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sat, 15 Aug 2020 21:48:15 +0800
Subject: [PATCH 04/14] add color theme option

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/assets/code_mirror/monokai.css  |   4 ++
 src/assets/code_mirror/tomorrow.css | 107 +++++++++++++++++-----------
 src/assets/code_mirror/zenburn.css  |   3 +
 src/components/lib/editor.vue       |  41 +++++++++--
 src/sfconfig.js                     |  42 +++++++++++
 5 files changed, 151 insertions(+), 46 deletions(-)
 create mode 100644 src/assets/code_mirror/monokai.css
 create mode 100644 src/assets/code_mirror/zenburn.css

diff --git a/src/assets/code_mirror/monokai.css b/src/assets/code_mirror/monokai.css
new file mode 100644
index 00000000..b3de47f8
--- /dev/null
+++ b/src/assets/code_mirror/monokai.css
@@ -0,0 +1,4 @@
+.cm-s-monokai
+span .cm-comment {
+    color: #75715E !important;
+}
\ No newline at end of file
diff --git a/src/assets/code_mirror/tomorrow.css b/src/assets/code_mirror/tomorrow.css
index b147ab26..ebc58e38 100644
--- a/src/assets/code_mirror/tomorrow.css
+++ b/src/assets/code_mirror/tomorrow.css
@@ -4,88 +4,105 @@
     color: #4d4d4c;
 }
 
+.cm-s-3024-day
 .CodeMirror-cursor {
-    opacity: 0.7;
-    border-left: 2px solid #4d4d4c;
+    opacity: 0.7 !important;
+    border-left: 2px solid #4d4d4c !important;
 }
 
-.cm-qualifier {
+.cm-s-3024-day
+span .cm-qualifier {
     color: #c82829;
 }
 
-.cm-property {
+.cm-s-3024-day
+span .cm-property {
     color: #eab700;
 }
 
-.cm-meta,
-.cm-number,
-.cm-atom {
+.cm-s-3024-day
+span .cm-meta,
+span .cm-number,
+span .cm-atom {
     color: #f5871f;
 }
 
-.cm-comment {
+.cm-s-3024-day
+span .cm-comment {
     color: #8e908c !important;
 }
 
-.cm-keyword,
-.cm-type,
-.cm-tag {
+.cm-s-3024-day
+span .cm-keyword,
+span .cm-type,
+span .cm-tag {
     color: #8959a8;
 }
 
-.cm-def {
+.cm-s-3024-day
+span .cm-def {
     color: #4271ae;
 }
 
-.cm-string {
-    color: #718c00 !important;
+.cm-s-3024-day
+span .cm-string {
+    color: #718c00;
 }
 
-.CodeMirror-linebackground,
-.CodeMirror-activeline-background {
-    background-color: #efefef !important;
+.cm-s-3024-day
+span .cm-operator {
+    color: #3e999f;
 }
 
-.cm-operator {
-    color: #3e999f !important;
+.cm-s-3024-day
+.CodeMirror-linebackground,
+.CodeMirror-activeline-background {
+    background-color: #efefef;
 }
 
+.cm-s-3024-day
 .CodeMirror-selected {
     background-color: #d6d6d6 !important;
 }
 
+.cm-s-3024-day
 .CodeMirror-gutters {
-    background: #fcfcfc;
-    border-right: none;
+    background: #fcfcfc !important;
+    border-right: none !important;
 }
 
+.cm-s-3024-day
 .CodeMirror-linenumber {
-    color: #909399;
-    font-size: 15px;
+    color: #909399 !important;
+    font-size: 15px !important;
 }
 
+.cm-s-3024-day
 .CodeMirror-matchingbracket {
     color: #4d4d4c !important;
-    outline: 1px solid #d6d6d6;
-    -moz-outline-radius: 3px;
+    outline: 1px solid #d6d6d6 !important;
+    -moz-outline-radius: 3px !important;
 }
 
+.cm-s-3024-day
 .CodeMirror-nonmatchingbracket {
     color: #c82829 !important;
-    outline: 1px solid #c82829;
-    -moz-outline-radius: 3px;
+    outline: 1px solid #c82829 !important;
+    -moz-outline-radius: 3px !important;
 }
 
+.cm-s-3024-day
 .CodeMirror-foldmarker {
     text-shadow: none !important;
     color: #8e908c !important;
     font-family: "Fira Sans" !important;
-    outline: 1px solid #d6d6d6;
-    -moz-outline-radius: 3px;
+    outline: 1px solid #d6d6d6 !important;
+    -moz-outline-radius: 3px !important;
 }
 
+.cm-s-3024-day
 .CodeMirror span[role="presentation"] {
-    font-size: 14px;
+    font-size: 14px !important;
 }
 
 .CodeMirror-hints {
@@ -108,40 +125,46 @@ li.CodeMirror-hint-active {
     font-weight: 500;
 }
 
+.cm-s-3024-day
 .CodeMirror-dialog {
     background-color: #fefefe !important;
 }
 
+.cm-s-3024-day
 .cm-searching {
-    background-color: #d6d6d6;
+    background-color: #d6d6d6 !important;
 }
 
+.cm-s-3024-day
 .CodeMirror-search-label {
-    line-height: 24px;
-    font-weight: 500;
+    line-height: 24px !important;
+    font-weight: 500 !important;
 }
 
+.cm-s-3024-day
 .CodeMirror-search-field {
-    line-height: 20px;
+    line-height: 20px !important;
     border: 1px solid #dcdfe6 !important;
-    width: 50em !important;
+    width: 30em !important;
 }
 
+.cm-s-3024-day
 .CodeMirror-search-hint {
-    line-height: 25px;
-    float: right;
+    line-height: 25px !important;
+    float: right !important;
 }
 
+.cm-s-3024-day
 .cm-matchhighlight {
-    outline: 1px solid #d6d6d6;
-    -moz-outline-radius: 3px;
+    outline: 1px solid #d6d6d6 !important;
+    -moz-outline-radius: 3px !important;
 }
 
 .CodeMirror-selection-highlight-scrollbar {
-    margin-right: 2.5px;
+    margin-right: 2.5px !important;
     width: 5px !important;
-    background-color: #8e908c;
-    opacity: 0.6;
+    background-color: #8e908c !important;
+    opacity: 0.6 !important;
 }
 
 .CodeMirror-simplescroll-horizontal div,
diff --git a/src/assets/code_mirror/zenburn.css b/src/assets/code_mirror/zenburn.css
new file mode 100644
index 00000000..8b84c52a
--- /dev/null
+++ b/src/assets/code_mirror/zenburn.css
@@ -0,0 +1,3 @@
+.cm-s-zenburn span.cm-type {
+    color: #dcdccc;
+}
\ No newline at end of file
diff --git a/src/components/lib/editor.vue b/src/components/lib/editor.vue
index 44b3fd37..2d227aec 100644
--- a/src/components/lib/editor.vue
+++ b/src/components/lib/editor.vue
@@ -12,6 +12,24 @@
         :value="item.value"
       />
     </el-select>
+    <el-select
+      v-model="theme"
+      placeholder="Select Theme"
+      style="margin-bottom: 10px; margin-left: 20px;"
+    >
+      <el-option-group
+        v-for="group in themeTable"
+        :key="group.label"
+        :label="group.label"
+      >
+        <el-option
+          v-for="item in group.themes"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-option-group>
+    </el-select>
     <textarea ref="editor" v-model="source" />
   </div>
 </template>
@@ -21,6 +39,12 @@ import sfconfig from './../../sfconfig';
 import * as CodeMirror from 'codemirror/lib/codemirror';
 import 'codemirror/lib/codemirror.css';
 import './../../assets/code_mirror/tomorrow.css';
+import './../../assets/code_mirror/zenburn.css';
+import './../../assets/code_mirror/monokai.css';
+import 'codemirror/theme/neo.css';
+import 'codemirror/theme/ayu-mirage.css';
+import 'codemirror/theme/monokai.css';
+import 'codemirror/theme/zenburn.css';
 import 'codemirror/mode/clike/clike';
 import 'codemirror/mode/rust/rust';
 import 'codemirror/mode/javascript/javascript';
@@ -59,12 +83,19 @@ export default {
       source: null,
       langTable: sfconfig.codeMirrorModeTable,
       editor: null,
-      mode: '-'
+      mode: '-',
+      theme: '-', 
+      themeTable: sfconfig.CodeMirrorThemeTableOptions,
+      CodeMirrorThemeTable: sfconfig.CodeMirrorThemeTable
     };
   },
   watch: {
     mode(val) {
       editor.setOption('mode', this.langTable[val].mode);
+    },
+    theme(val) {
+      console.log(this.themeTable[val]);
+      editor.setOption('theme', this.CodeMirrorThemeTable[val].theme);
     }
   },
   methods: {
@@ -99,13 +130,15 @@ export default {
       editor.on('keypress', function() {
         editor.showHint();
       });
+    },
+    loadUserLangMode() {
+      this.mode = this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].label;
+      editor.setOption('mode', this.langTable[this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].value].mode);
     }
   },
   mounted() {
     this.loadEditor();
-    this.mode = this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].label;
-    console.log(this.mode);
-    editor.setOption('mode', this.langTable[this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].value].mode);
+    this.loadUserLangMode();
   }
 };
 </script>
diff --git a/src/sfconfig.js b/src/sfconfig.js
index 2f08916e..743b634a 100644
--- a/src/sfconfig.js
+++ b/src/sfconfig.js
@@ -136,5 +136,47 @@ export default {
     label: 'Pascal',
     mode: 'text/x-pascal'
   }],
+  CodeMirrorThemeTableOptions: [{
+    label: 'Light',
+    themes: [{
+      value: '0',
+      label: 'Tomorrow'
+    }, {
+      value: '1',
+      label: 'Neo',
+      theme: 'neo'
+    }]
+  }, {
+    label: 'Dark',
+    themes: [{
+      value: '2',
+      label: 'Ayu Mirage',
+      theme: 'ayu-mirage'
+    }, {
+      value: '3',
+      label: 'Monokai',
+      theme: 'monokai'
+    }, {
+      value: '4',
+      label: 'Zenburn',
+      theme: 'zenburn'
+    }]
+  }],
+  CodeMirrorThemeTable: [{
+    value: '0',
+    theme: '3024-day'
+  }, {
+    value: '1',
+    theme: 'neo'
+  }, {
+    value: '2',
+    theme: 'ayu-mirage'
+  }, {
+    value: '3',
+    theme: 'monokai'
+  }, {
+    value: '4',
+    theme: 'zenburn'
+  }],
   captchaKeyMax: 2000000000
 };

From f4ed1517653e105e9d625fd8f19cfc0299d5afb3 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sat, 15 Aug 2020 21:55:03 +0800
Subject: [PATCH 05/14] run lint

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/assets/code_mirror/monokai.css  |  7 ++-
 src/assets/code_mirror/tomorrow.css | 77 ++++++++++-------------------
 src/assets/code_mirror/zenburn.css  |  2 +-
 3 files changed, 31 insertions(+), 55 deletions(-)

diff --git a/src/assets/code_mirror/monokai.css b/src/assets/code_mirror/monokai.css
index b3de47f8..58883301 100644
--- a/src/assets/code_mirror/monokai.css
+++ b/src/assets/code_mirror/monokai.css
@@ -1,4 +1,3 @@
-.cm-s-monokai
-span .cm-comment {
-    color: #75715E !important;
-}
\ No newline at end of file
+.cm-s-monokai span.cm-comment {
+    color: #75715e !important;
+}
diff --git a/src/assets/code_mirror/tomorrow.css b/src/assets/code_mirror/tomorrow.css
index ebc58e38..3669b064 100644
--- a/src/assets/code_mirror/tomorrow.css
+++ b/src/assets/code_mirror/tomorrow.css
@@ -4,95 +4,79 @@
     color: #4d4d4c;
 }
 
-.cm-s-3024-day
-.CodeMirror-cursor {
+.cm-s-3024-day .CodeMirror-cursor {
     opacity: 0.7 !important;
     border-left: 2px solid #4d4d4c !important;
 }
 
-.cm-s-3024-day
-span .cm-qualifier {
+.cm-s-3024-day span.cm-qualifier {
     color: #c82829;
 }
 
-.cm-s-3024-day
-span .cm-property {
+.cm-s-3024-day span.cm-property {
     color: #eab700;
 }
 
-.cm-s-3024-day
-span .cm-meta,
-span .cm-number,
-span .cm-atom {
+.cm-s-3024-day span.cm-meta,
+span.cm-number,
+span.cm-atom {
     color: #f5871f;
 }
 
-.cm-s-3024-day
-span .cm-comment {
+.cm-s-3024-day span.cm-comment {
     color: #8e908c !important;
 }
 
-.cm-s-3024-day
-span .cm-keyword,
-span .cm-type,
-span .cm-tag {
+.cm-s-3024-day span.cm-keyword,
+span.cm-type,
+span.cm-tag {
     color: #8959a8;
 }
 
-.cm-s-3024-day
-span .cm-def {
+.cm-s-3024-day span.cm-def {
     color: #4271ae;
 }
 
-.cm-s-3024-day
-span .cm-string {
+.cm-s-3024-day span.cm-string {
     color: #718c00;
 }
 
-.cm-s-3024-day
-span .cm-operator {
+.cm-s-3024-day span.cm-operator {
     color: #3e999f;
 }
 
-.cm-s-3024-day
-.CodeMirror-linebackground,
+.cm-s-3024-day .CodeMirror-linebackground,
 .CodeMirror-activeline-background {
     background-color: #efefef;
 }
 
-.cm-s-3024-day
-.CodeMirror-selected {
+.cm-s-3024-day .CodeMirror-selected {
     background-color: #d6d6d6 !important;
 }
 
-.cm-s-3024-day
-.CodeMirror-gutters {
+.cm-s-3024-day .CodeMirror-gutters {
     background: #fcfcfc !important;
     border-right: none !important;
 }
 
-.cm-s-3024-day
-.CodeMirror-linenumber {
+.cm-s-3024-day .CodeMirror-linenumber {
     color: #909399 !important;
     font-size: 15px !important;
 }
 
-.cm-s-3024-day
-.CodeMirror-matchingbracket {
+.cm-s-3024-day .CodeMirror-matchingbracket {
     color: #4d4d4c !important;
     outline: 1px solid #d6d6d6 !important;
     -moz-outline-radius: 3px !important;
 }
 
-.cm-s-3024-day
-.CodeMirror-nonmatchingbracket {
+.cm-s-3024-day .CodeMirror-nonmatchingbracket {
     color: #c82829 !important;
     outline: 1px solid #c82829 !important;
     -moz-outline-radius: 3px !important;
 }
 
-.cm-s-3024-day
-.CodeMirror-foldmarker {
+.cm-s-3024-day .CodeMirror-foldmarker {
     text-shadow: none !important;
     color: #8e908c !important;
     font-family: "Fira Sans" !important;
@@ -100,8 +84,7 @@ span .cm-operator {
     -moz-outline-radius: 3px !important;
 }
 
-.cm-s-3024-day
-.CodeMirror span[role="presentation"] {
+.cm-s-3024-day .CodeMirror span[role="presentation"] {
     font-size: 14px !important;
 }
 
@@ -125,37 +108,31 @@ li.CodeMirror-hint-active {
     font-weight: 500;
 }
 
-.cm-s-3024-day
-.CodeMirror-dialog {
+.cm-s-3024-day .CodeMirror-dialog {
     background-color: #fefefe !important;
 }
 
-.cm-s-3024-day
-.cm-searching {
+.cm-s-3024-day .cm-searching {
     background-color: #d6d6d6 !important;
 }
 
-.cm-s-3024-day
-.CodeMirror-search-label {
+.cm-s-3024-day .CodeMirror-search-label {
     line-height: 24px !important;
     font-weight: 500 !important;
 }
 
-.cm-s-3024-day
-.CodeMirror-search-field {
+.cm-s-3024-day .CodeMirror-search-field {
     line-height: 20px !important;
     border: 1px solid #dcdfe6 !important;
     width: 30em !important;
 }
 
-.cm-s-3024-day
-.CodeMirror-search-hint {
+.cm-s-3024-day .CodeMirror-search-hint {
     line-height: 25px !important;
     float: right !important;
 }
 
-.cm-s-3024-day
-.cm-matchhighlight {
+.cm-s-3024-day .cm-matchhighlight {
     outline: 1px solid #d6d6d6 !important;
     -moz-outline-radius: 3px !important;
 }
diff --git a/src/assets/code_mirror/zenburn.css b/src/assets/code_mirror/zenburn.css
index 8b84c52a..c389ca90 100644
--- a/src/assets/code_mirror/zenburn.css
+++ b/src/assets/code_mirror/zenburn.css
@@ -1,3 +1,3 @@
 .cm-s-zenburn span.cm-type {
     color: #dcdccc;
-}
\ No newline at end of file
+}

From b6098225620626f88cdd53d3a602ca84e3fb63b0 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sat, 15 Aug 2020 22:07:08 +0800
Subject: [PATCH 06/14] improved style

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/assets/code_mirror/CodeMirror.css | 55 ++++++++++++++++++++++++++
 src/assets/code_mirror/neo.css        |  0
 src/assets/code_mirror/tomorrow.css   | 57 +--------------------------
 src/components/lib/editor.vue         |  1 +
 4 files changed, 57 insertions(+), 56 deletions(-)
 create mode 100644 src/assets/code_mirror/CodeMirror.css
 create mode 100644 src/assets/code_mirror/neo.css

diff --git a/src/assets/code_mirror/CodeMirror.css b/src/assets/code_mirror/CodeMirror.css
new file mode 100644
index 00000000..ccbdc2a8
--- /dev/null
+++ b/src/assets/code_mirror/CodeMirror.css
@@ -0,0 +1,55 @@
+.CodeMirror {
+    height: 600px !important;
+    background-color: #fcfcfc;
+    color: #4d4d4c;
+}
+
+.CodeMirror-foldmarker {
+    text-shadow: none !important;
+    color: #8e908c !important;
+    font-family: "Fira Sans" !important;
+    outline: 1px solid #d6d6d6 !important;
+    -moz-outline-radius: 3px !important;
+}
+
+.CodeMirror-hints {
+    max-height: 200px !important;
+    box-shadow: none !important;
+    border-color: #dcdfe6 !important;
+    background-color: #fefefe !important;
+    font-family: "Fira Code" !important;
+    padding: 5px !important;
+}
+
+.CodeMirror-hint {
+    line-height: 20px;
+    color: #444444 !important;
+}
+
+li.CodeMirror-hint-active {
+    background-color: #efefef !important;
+    color: #444444 !important;
+    font-weight: 500;
+}
+
+.CodeMirror-selection-highlight-scrollbar {
+    margin-right: 2.5px !important;
+    width: 5px !important;
+    background-color: #8e908c !important;
+    opacity: 0.6 !important;
+}
+
+.CodeMirror-simplescroll-horizontal div,
+.CodeMirror-simplescroll-vertical div {
+    background: #b3b3b3 !important;
+    border: none !important;
+    border-radius: 0 !important;
+}
+
+.CodeMirror-simplescroll-vertical {
+    width: 10px !important;
+}
+
+.CodeMirror-simplescroll-horizontal {
+    height: 10px !important;
+}
diff --git a/src/assets/code_mirror/neo.css b/src/assets/code_mirror/neo.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/assets/code_mirror/tomorrow.css b/src/assets/code_mirror/tomorrow.css
index 3669b064..9fbee63d 100644
--- a/src/assets/code_mirror/tomorrow.css
+++ b/src/assets/code_mirror/tomorrow.css
@@ -1,9 +1,3 @@
-.CodeMirror {
-    height: 600px !important;
-    background-color: #fcfcfc;
-    color: #4d4d4c;
-}
-
 .cm-s-3024-day .CodeMirror-cursor {
     opacity: 0.7 !important;
     border-left: 2px solid #4d4d4c !important;
@@ -60,6 +54,7 @@ span.cm-tag {
 }
 
 .cm-s-3024-day .CodeMirror-linenumber {
+    font-family: "Fira Code" !important;
     color: #909399 !important;
     font-size: 15px !important;
 }
@@ -76,38 +71,10 @@ span.cm-tag {
     -moz-outline-radius: 3px !important;
 }
 
-.cm-s-3024-day .CodeMirror-foldmarker {
-    text-shadow: none !important;
-    color: #8e908c !important;
-    font-family: "Fira Sans" !important;
-    outline: 1px solid #d6d6d6 !important;
-    -moz-outline-radius: 3px !important;
-}
-
 .cm-s-3024-day .CodeMirror span[role="presentation"] {
     font-size: 14px !important;
 }
 
-.CodeMirror-hints {
-    max-height: 200px !important;
-    box-shadow: none !important;
-    border-color: #dcdfe6 !important;
-    background-color: #fefefe !important;
-    font-family: "Fira Code" !important;
-    padding: 5px !important;
-}
-
-.CodeMirror-hint {
-    line-height: 20px;
-    color: #444444 !important;
-}
-
-li.CodeMirror-hint-active {
-    background-color: #efefef !important;
-    color: #444444 !important;
-    font-weight: 500;
-}
-
 .cm-s-3024-day .CodeMirror-dialog {
     background-color: #fefefe !important;
 }
@@ -136,25 +103,3 @@ li.CodeMirror-hint-active {
     outline: 1px solid #d6d6d6 !important;
     -moz-outline-radius: 3px !important;
 }
-
-.CodeMirror-selection-highlight-scrollbar {
-    margin-right: 2.5px !important;
-    width: 5px !important;
-    background-color: #8e908c !important;
-    opacity: 0.6 !important;
-}
-
-.CodeMirror-simplescroll-horizontal div,
-.CodeMirror-simplescroll-vertical div {
-    background: #b3b3b3 !important;
-    border: none !important;
-    border-radius: 0 !important;
-}
-
-.CodeMirror-simplescroll-vertical {
-    width: 10px !important;
-}
-
-.CodeMirror-simplescroll-horizontal {
-    height: 10px !important;
-}
diff --git a/src/components/lib/editor.vue b/src/components/lib/editor.vue
index 2d227aec..1719ccf0 100644
--- a/src/components/lib/editor.vue
+++ b/src/components/lib/editor.vue
@@ -38,6 +38,7 @@
 import sfconfig from './../../sfconfig';
 import * as CodeMirror from 'codemirror/lib/codemirror';
 import 'codemirror/lib/codemirror.css';
+import './../../assets/code_mirror/CodeMirror.css';
 import './../../assets/code_mirror/tomorrow.css';
 import './../../assets/code_mirror/zenburn.css';
 import './../../assets/code_mirror/monokai.css';

From c54c531cb775ed0536605f91e614bdf73f44bc3a Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sun, 16 Aug 2020 00:27:52 +0800
Subject: [PATCH 07/14] improved style & add theme change

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/assets/code_mirror/CodeMirror.css |  4 ++++
 src/assets/code_mirror/tomorrow.css   |  1 -
 src/components/lib/editor.vue         | 15 ++++++++++++++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/assets/code_mirror/CodeMirror.css b/src/assets/code_mirror/CodeMirror.css
index ccbdc2a8..85bd643e 100644
--- a/src/assets/code_mirror/CodeMirror.css
+++ b/src/assets/code_mirror/CodeMirror.css
@@ -4,6 +4,10 @@
     color: #4d4d4c;
 }
 
+.CodeMirror-linenumber {
+    font-family: "Fira Code" !important;
+}
+
 .CodeMirror-foldmarker {
     text-shadow: none !important;
     color: #8e908c !important;
diff --git a/src/assets/code_mirror/tomorrow.css b/src/assets/code_mirror/tomorrow.css
index 9fbee63d..5e2da7d0 100644
--- a/src/assets/code_mirror/tomorrow.css
+++ b/src/assets/code_mirror/tomorrow.css
@@ -54,7 +54,6 @@ span.cm-tag {
 }
 
 .cm-s-3024-day .CodeMirror-linenumber {
-    font-family: "Fira Code" !important;
     color: #909399 !important;
     font-size: 15px !important;
 }
diff --git a/src/components/lib/editor.vue b/src/components/lib/editor.vue
index 1719ccf0..52f35e2f 100644
--- a/src/components/lib/editor.vue
+++ b/src/components/lib/editor.vue
@@ -35,7 +35,9 @@
 </template>
 
 <script>
+import apiurl from './../../apiurl';
 import sfconfig from './../../sfconfig';
+
 import * as CodeMirror from 'codemirror/lib/codemirror';
 import 'codemirror/lib/codemirror.css';
 import './../../assets/code_mirror/CodeMirror.css';
@@ -95,8 +97,11 @@ export default {
       editor.setOption('mode', this.langTable[val].mode);
     },
     theme(val) {
-      console.log(this.themeTable[val]);
       editor.setOption('theme', this.CodeMirrorThemeTable[val].theme);
+      this.$axios
+        .patch(apiurl('/account/' + this.$store.state.user.userid), {
+          editor_theme: this.theme
+        });
     }
   },
   methods: {
@@ -135,11 +140,19 @@ export default {
     loadUserLangMode() {
       this.mode = this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].label;
       editor.setOption('mode', this.langTable[this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].value].mode);
+    },
+    loadUserTheme() {
+      this.$axios
+        .get(apiurl('/account/' + this.$store.state.user.userid))
+        .then(res => {
+          this.theme = String(res.data.res.editor_theme);
+        });
     }
   },
   mounted() {
     this.loadEditor();
     this.loadUserLangMode();
+    this.loadUserTheme();
   }
 };
 </script>

From 5f6c0561dd96c2bc2b429f20b2fe6bb4255c03e9 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sun, 16 Aug 2020 13:27:54 +0800
Subject: [PATCH 08/14] improved create problem input check

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/components/problem/create.vue | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/problem/create.vue b/src/components/problem/create.vue
index 3d4dde59..a6b06fe7 100644
--- a/src/components/problem/create.vue
+++ b/src/components/problem/create.vue
@@ -59,14 +59,23 @@ export default {
       if (val === '') {
         this.errorPID = true;
       } else {
-        this.$axios
-          .get(apiurl('/problem/' + String(val)))
-          .then(() => {
+        this.errorPID = false;
+        for (let i = 0; i < val.length; i += 1) {
+          let now = val.charAt(i);
+          if (isNaN(parseInt(now))) {
             this.errorPID = true;
-          })
-          .catch(() => {
-            this.errorPID = false;
-          });
+          }
+        }
+        if (this.errorPID == false) {
+          this.$axios
+            .get(apiurl('/problem/' + String(val)))
+            .then(() => {
+              this.errorPID = true;
+            })
+            .catch(() => {
+              this.errorPID = false;
+            });
+        }
       }
     },
     title(val) {

From 69731c4f6120da7afa72f221a45f8cd05bff62c4 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sun, 16 Aug 2020 13:36:35 +0800
Subject: [PATCH 09/14] improved create problem input check

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/components/problem/create.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/problem/create.vue b/src/components/problem/create.vue
index a6b06fe7..c0376c07 100644
--- a/src/components/problem/create.vue
+++ b/src/components/problem/create.vue
@@ -58,15 +58,18 @@ export default {
     pid(val) {
       if (val === '') {
         this.errorPID = true;
+      } else if (val.length >= 8) {
+        this.errorPID = true;
       } else {
-        this.errorPID = false;
+        let flag = false;
         for (let i = 0; i < val.length; i += 1) {
           let now = val.charAt(i);
           if (isNaN(parseInt(now))) {
             this.errorPID = true;
+            flag = true;
           }
         }
-        if (this.errorPID == false) {
+        if (flag == false) {
           this.$axios
             .get(apiurl('/problem/' + String(val)))
             .then(() => {

From a7e946befd6fa9e5daa2da035e05884d9fd79602 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sun, 16 Aug 2020 14:07:38 +0800
Subject: [PATCH 10/14] improved style

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/assets/code_mirror/ayu-mirage.css | 20 ++++++++++++++++++++
 src/assets/code_mirror/monokai.css    |  4 ++++
 src/components/lib/editor.vue         |  1 +
 3 files changed, 25 insertions(+)
 create mode 100644 src/assets/code_mirror/ayu-mirage.css

diff --git a/src/assets/code_mirror/ayu-mirage.css b/src/assets/code_mirror/ayu-mirage.css
new file mode 100644
index 00000000..0071fc8d
--- /dev/null
+++ b/src/assets/code_mirror/ayu-mirage.css
@@ -0,0 +1,20 @@
+.cm-s-ayu-mirage span.cm-comment {
+    color: #5C6773 !important;
+}
+
+.cm-s-ayu-mirage span.cm-atom {
+    color: #ffd580 !important;
+}
+
+.cm-s-ayu-mirage .cm-matchhighlight {
+    background-color: #323A4C !important;
+}
+
+.cm-s-ayu-mirage .CodeMirror-matchingbracket {
+    background-color: #323A4C !important;
+    text-decoration: none !important;
+}
+
+.cm-s-ayu-mirage .CodeMirror-cursor {
+    border-left: 2px solid #ffcc66 !important;
+}
diff --git a/src/assets/code_mirror/monokai.css b/src/assets/code_mirror/monokai.css
index 58883301..cd0710f6 100644
--- a/src/assets/code_mirror/monokai.css
+++ b/src/assets/code_mirror/monokai.css
@@ -1,3 +1,7 @@
 .cm-s-monokai span.cm-comment {
     color: #75715e !important;
 }
+
+.cm-s-monokai .cm-matchhighlight {
+    background-color: #49483E;
+}
diff --git a/src/components/lib/editor.vue b/src/components/lib/editor.vue
index 52f35e2f..c83c28cc 100644
--- a/src/components/lib/editor.vue
+++ b/src/components/lib/editor.vue
@@ -44,6 +44,7 @@ import './../../assets/code_mirror/CodeMirror.css';
 import './../../assets/code_mirror/tomorrow.css';
 import './../../assets/code_mirror/zenburn.css';
 import './../../assets/code_mirror/monokai.css';
+import './../../assets/code_mirror/ayu-mirage.css';
 import 'codemirror/theme/neo.css';
 import 'codemirror/theme/ayu-mirage.css';
 import 'codemirror/theme/monokai.css';

From 97afe4fa32ae9e83a3c88d779c8021fa8f1d608b Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sun, 16 Aug 2020 14:15:20 +0800
Subject: [PATCH 11/14] improved style

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/assets/code_mirror/neo.css | 15 +++++++++++++++
 src/components/lib/editor.vue  |  1 +
 2 files changed, 16 insertions(+)

diff --git a/src/assets/code_mirror/neo.css b/src/assets/code_mirror/neo.css
index e69de29b..17ddfdc4 100644
--- a/src/assets/code_mirror/neo.css
+++ b/src/assets/code_mirror/neo.css
@@ -0,0 +1,15 @@
+.cm-s-neo .CodeMirror-matchingbracket {
+    color: #4d4d4c !important;
+    outline: 1px solid #d6d6d6 !important;
+    -moz-outline-radius: 3px !important;
+}
+
+.cm-s-neo .CodeMirror-nonmatchingbracket {
+    color: #c82829 !important;
+    outline: 1px solid #c82829 !important;
+    -moz-outline-radius: 3px !important;
+}
+
+.cm-s-neo .cm-matchhighlight {
+    background-color: #dddddd !important;
+}
diff --git a/src/components/lib/editor.vue b/src/components/lib/editor.vue
index c83c28cc..f90bac9e 100644
--- a/src/components/lib/editor.vue
+++ b/src/components/lib/editor.vue
@@ -41,6 +41,7 @@ import sfconfig from './../../sfconfig';
 import * as CodeMirror from 'codemirror/lib/codemirror';
 import 'codemirror/lib/codemirror.css';
 import './../../assets/code_mirror/CodeMirror.css';
+import './../../assets/code_mirror/neo.css';
 import './../../assets/code_mirror/tomorrow.css';
 import './../../assets/code_mirror/zenburn.css';
 import './../../assets/code_mirror/monokai.css';

From 39fd4035d8add05283bd38f4e0625bb7cac4b219 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sun, 16 Aug 2020 15:59:18 +0800
Subject: [PATCH 12/14] fix mode not import problem

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/components/lib/editor.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/lib/editor.vue b/src/components/lib/editor.vue
index f90bac9e..691bcb79 100644
--- a/src/components/lib/editor.vue
+++ b/src/components/lib/editor.vue
@@ -55,6 +55,10 @@ import 'codemirror/mode/rust/rust';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/python/python';
 import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/ruby/ruby';
+import 'codemirror/mode/go/go';
+import 'codemirror/mode/php/php';
+import 'codemirror/mode/pascal/pascal';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/hint/show-hint.css';
 import 'codemirror/addon/hint/anyword-hint';

From 66b95f9468f940171fe745c2ac397bb4f385ed42 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sun, 16 Aug 2020 16:07:47 +0800
Subject: [PATCH 13/14] run lint

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/assets/code_mirror/ayu-mirage.css | 6 +++---
 src/assets/code_mirror/monokai.css    | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/code_mirror/ayu-mirage.css b/src/assets/code_mirror/ayu-mirage.css
index 0071fc8d..17840d8b 100644
--- a/src/assets/code_mirror/ayu-mirage.css
+++ b/src/assets/code_mirror/ayu-mirage.css
@@ -1,5 +1,5 @@
 .cm-s-ayu-mirage span.cm-comment {
-    color: #5C6773 !important;
+    color: #5c6773 !important;
 }
 
 .cm-s-ayu-mirage span.cm-atom {
@@ -7,11 +7,11 @@
 }
 
 .cm-s-ayu-mirage .cm-matchhighlight {
-    background-color: #323A4C !important;
+    background-color: #323a4c !important;
 }
 
 .cm-s-ayu-mirage .CodeMirror-matchingbracket {
-    background-color: #323A4C !important;
+    background-color: #323a4c !important;
     text-decoration: none !important;
 }
 
diff --git a/src/assets/code_mirror/monokai.css b/src/assets/code_mirror/monokai.css
index cd0710f6..7cc95186 100644
--- a/src/assets/code_mirror/monokai.css
+++ b/src/assets/code_mirror/monokai.css
@@ -3,5 +3,5 @@
 }
 
 .cm-s-monokai .cm-matchhighlight {
-    background-color: #49483E;
+    background-color: #49483e;
 }

From eae96594e795af3f7c4e1971c6802ca07f3fbb54 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sun, 16 Aug 2020 16:38:08 +0800
Subject: [PATCH 14/14] extract mode select & theme select

Signed-off-by: zhangtianli2006 <zhangtianli2006@163.com>
---
 src/components/app/editor.vue | 64 +++++++++++++++++++++++++++++++--
 src/components/lib/editor.vue | 66 +++++++----------------------------
 2 files changed, 75 insertions(+), 55 deletions(-)

diff --git a/src/components/app/editor.vue b/src/components/app/editor.vue
index 1992c7ac..538d08e0 100644
--- a/src/components/app/editor.vue
+++ b/src/components/app/editor.vue
@@ -5,21 +5,81 @@
         <i class="el-icon-document" />
         Code Editor
       </div>
-      <codeMirror />
+      <el-select
+        v-model="mode"
+        placeholder="Select Mode"
+        style="margin-bottom: 10px;"
+      >
+        <el-option
+          v-for="item in langTable"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-select
+        v-model="theme"
+        placeholder="Select Theme"
+        style="margin-bottom: 10px; margin-left: 20px;"
+      >
+        <el-option-group
+          v-for="group in themeTable"
+          :key="group.label"
+          :label="group.label"
+        >
+          <el-option
+            v-for="item in group.themes"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-option-group>
+      </el-select>
+      <codeMirror :mode="mode" :theme="theme" />
     </el-card>
   </div>
 </template>
 
 <script>
 import codeMirror from './../lib/editor.vue';
+import apiurl from './../../apiurl';
+import sfconfig from './../../sfconfig';
 
 export default {
   name: 'CodeEditorContainer',
   data() {
     return {
-      source: null
+      mode: '-',
+      theme: '-',
+      langTable: sfconfig.codeMirrorModeTable,
+      themeTable: sfconfig.CodeMirrorThemeTableOptions,
+      CodeMirrorThemeTable: sfconfig.CodeMirrorThemeTable
     };
   },
+  watch: {
+    theme(val) {
+      this.$axios
+        .patch(apiurl('/account/' + this.$store.state.user.userid), {
+          editor_theme: val
+        });
+    }
+  },
+  methods: {
+    loadUserLangMode() {
+      this.mode = this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].label;
+    },
+    loadUserTheme() {
+      this.$axios
+        .get(apiurl('/account/' + this.$store.state.user.userid))
+        .then(res => {
+          this.theme = String(res.data.res.editor_theme);
+        });
+    }
+  },
+  mounted() {
+    this.loadUserLangMode();
+    this.loadUserTheme();
+  },
   components: {
     codeMirror
   }
diff --git a/src/components/lib/editor.vue b/src/components/lib/editor.vue
index 691bcb79..87864e81 100644
--- a/src/components/lib/editor.vue
+++ b/src/components/lib/editor.vue
@@ -1,41 +1,10 @@
 <template>
   <div>
-    <el-select
-      v-model="mode"
-      placeholder="Select Mode"
-      style="margin-bottom: 10px;"
-    >
-      <el-option
-        v-for="item in langTable"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      />
-    </el-select>
-    <el-select
-      v-model="theme"
-      placeholder="Select Theme"
-      style="margin-bottom: 10px; margin-left: 20px;"
-    >
-      <el-option-group
-        v-for="group in themeTable"
-        :key="group.label"
-        :label="group.label"
-      >
-        <el-option
-          v-for="item in group.themes"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-option-group>
-    </el-select>
     <textarea ref="editor" v-model="source" />
   </div>
 </template>
 
 <script>
-import apiurl from './../../apiurl';
 import sfconfig from './../../sfconfig';
 
 import * as CodeMirror from 'codemirror/lib/codemirror';
@@ -91,30 +60,32 @@ export default {
     return {
       source: null,
       langTable: sfconfig.codeMirrorModeTable,
-      editor: null,
-      mode: '-',
-      theme: '-', 
-      themeTable: sfconfig.CodeMirrorThemeTableOptions,
       CodeMirrorThemeTable: sfconfig.CodeMirrorThemeTable
     };
   },
+  props: {
+    mode: {
+      type: String,
+      default: 'text/x-c++src'
+    },
+    theme: {
+      type: String,
+      default: '3024-day'
+    }
+  },
   watch: {
     mode(val) {
       editor.setOption('mode', this.langTable[val].mode);
     },
     theme(val) {
       editor.setOption('theme', this.CodeMirrorThemeTable[val].theme);
-      this.$axios
-        .patch(apiurl('/account/' + this.$store.state.user.userid), {
-          editor_theme: this.theme
-        });
     }
   },
   methods: {
     loadEditor() {
       editor = CodeMirror.fromTextArea(this.$refs.editor, {
         theme: '3024-day',
-        mode: 'text/x-markdown',
+        mode: 'text/x-c++src',
         indentUnit: 4,
         smartIndent: true,
         indentWithTabs: false,
@@ -143,22 +114,11 @@ export default {
         editor.showHint();
       });
     },
-    loadUserLangMode() {
-      this.mode = this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].label;
-      editor.setOption('mode', this.langTable[this.langTable[sfconfig.langTable[this.$store.state.user.userlang].codeMirror].value].mode);
-    },
-    loadUserTheme() {
-      this.$axios
-        .get(apiurl('/account/' + this.$store.state.user.userid))
-        .then(res => {
-          this.theme = String(res.data.res.editor_theme);
-        });
-    }
   },
   mounted() {
     this.loadEditor();
-    this.loadUserLangMode();
-    this.loadUserTheme();
+    editor.setOption('mode', this.langTable[this.mode].mode);
+    editor.setOption('theme', this.langTable[this.theme].mode);
   }
 };
 </script>