fix: update css editor

更新样式编辑器代码

.gitignore

@@ -0,0 +1,29 @@
+  
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+dist
+package-lock.json
+lib

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "liveServer.settings.port": 5501
-}

assets/scripts/editor.js

@@ -32,14 +32,14 @@ let app = new Vue({
         { label: '翡翠绿', value: 'rgba(0, 152, 116, 0.9)', hex: '清新且优雅' },
         { label: '辣椒红', value: 'rgba(155, 35, 53, 0.9)', hex: '自信且迷人' }
       ],
-      showBox:true,
+      showBox: true,
       aboutDialogVisible: false
     };
     d.currentEditorTheme = d.editorThemes[0].value;
     d.currentCssEditorTheme = d.editorThemes[0].value;
     d.currentFont = d.builtinFonts[0].value;
     d.currentSize = d.sizeOption[1].value;
-    d.currentColor = d.colorOption[1].value;
+    d.currentColor = d.colorOption[0].value;
     return d;
   },
   mounted() {
@@ -59,14 +59,14 @@ let app = new Vue({
       document.getElementById('cssEditor'), {
       mode: 'css',
       theme: 'style-mirror',
-            lineNumbers:false,
+      lineNumbers: false,
       lineWrapping: true,
       matchBrackets: true,
       autofocus: true,
       extraKeys: {
         "Ctrl-F": function autoFormat(editor) {
           var totalLines = editor.lineCount();
-                          editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
+          editor.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines });
         }
       },
     }
@@ -82,7 +82,7 @@ let app = new Vue({
       this.saveEditorContent(this.editor, '__editor_content');
     });
     this.cssEditor.on('update', (instance) => {
-        this.cssChanged()
+      this.cssChanged();
       this.saveEditorContent(this.cssEditor, '__css_content');
     });
     this.wxRenderer = new WxRenderer({
@@ -141,9 +141,9 @@ let app = new Vue({
     },
     cssChanged() {
       let json = css2json(this.cssEditor.getValue(0))
-        let theme = customCssWithTemplate(json,this.currentColor)
+      let theme = customCssWithTemplate(json, this.currentColor)
       this.wxRenderer.setOptions({
-            theme
+        theme: theme
       });
       this.refresh();
     },
@@ -215,7 +215,6 @@ let app = new Vue({
       }
     },
     customStyle() {
-        console.log(this.currentColor)
       this.showBox = !this.showBox;
     },
     setDefaultContent() {

assets/scripts/util.js

@@ -13,34 +13,39 @@ function setColorWithTemplate(template) {
 
 let setColor = setColorWithTemplate(default_theme);
 
-function customCssWithTemplate(jsonString,color) {
+function customCssWithTemplate(jsonString, color) {
     let custom_theme = JSON.parse(JSON.stringify(default_theme));
     // block
-        custom_theme.block.h1 = Object.assign(custom_theme.block.h1,jsonString.h1);
+    console.log(jsonString)
-        custom_theme.block.h2 = Object.assign(custom_theme.block.h2,jsonString.h2);
+    custom_theme.block.h1['border-bottom'] = `2px solid ${color}`;
-        custom_theme.block.h3 = Object.assign(custom_theme.block.h3,jsonString.h3);
-        custom_theme.block.h4 = Object.assign(custom_theme.block.h4,jsonString.h4);
-        custom_theme.block.p = Object.assign(custom_theme.block.p,jsonString.p);
-        custom_theme.block.blockquote = Object.assign(custom_theme.block.blockquote,jsonString.blockquote);
-        custom_theme.block.blockquote_p = Object.assign(custom_theme.block.blockquote_p,jsonString.blockquote_p);
-        custom_theme.block.code = Object.assign(custom_theme.block.code,jsonString.code);
-        custom_theme.block.image = Object.assign(custom_theme.block.image,jsonString.image);
-        custom_theme.block.ol = Object.assign(custom_theme.block.ol,jsonString.ol);
-        custom_theme.block.ul = Object.assign(custom_theme.block.ul,jsonString.ul);
-        custom_theme.block.footnotes = Object.assign(custom_theme.block.footnotes,jsonString.footnotes);
-        custom_theme.block.figure = Object.assign(custom_theme.block.figure,jsonString.figure);
-
-        // inline
-        custom_theme.inline.strong = Object.assign(custom_theme.inline.strong,jsonString.strong);
-        custom_theme.inline.table = Object.assign(custom_theme.inline.table,jsonString.table);
-        custom_theme.inline.thead = Object.assign(custom_theme.inline.thead,jsonString.thead);
-        custom_theme.inline.strong = Object.assign(custom_theme.inline.strong,jsonString.strong);
-        custom_theme.inline.link = Object.assign(custom_theme.inline.link,jsonString.link);
-        custom_theme.inline.wx_link = Object.assign(custom_theme.inline.wx_link,jsonString.wx_link);
-
     custom_theme.block.h2['background'] = color;
     custom_theme.block.h3['border-left'] = `3px solid ${color}`;
+    custom_theme.block.h4['color'] = color;
     custom_theme.inline.strong['color'] = color;
+
+    custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1);
+    custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2);
+    custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3);
+    custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4);
+    custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p);
+    custom_theme.block.blockquote = Object.assign(custom_theme.block.blockquote, jsonString.blockquote);
+    custom_theme.block.blockquote_p = Object.assign(custom_theme.block.blockquote_p, jsonString.blockquote_p);
+    custom_theme.block.code = Object.assign(custom_theme.block.code, jsonString.code);
+    custom_theme.block.image = Object.assign(custom_theme.block.image, jsonString.image);
+    custom_theme.block.ol = Object.assign(custom_theme.block.ol, jsonString.ol);
+    custom_theme.block.ul = Object.assign(custom_theme.block.ul, jsonString.ul);
+    custom_theme.block.footnotes = Object.assign(custom_theme.block.footnotes, jsonString.footnotes);
+    custom_theme.block.figure = Object.assign(custom_theme.block.figure, jsonString.figure);
+
+    // inline
+    custom_theme.inline.strong = Object.assign(custom_theme.inline.strong, jsonString.strong);
+    custom_theme.inline.table = Object.assign(custom_theme.inline.table, jsonString.table);
+    custom_theme.inline.thead = Object.assign(custom_theme.inline.thead, jsonString.thead);
+    custom_theme.inline.strong = Object.assign(custom_theme.inline.strong, jsonString.strong);
+    custom_theme.inline.link = Object.assign(custom_theme.inline.link, jsonString.link);
+    custom_theme.inline.wx_link = Object.assign(custom_theme.inline.wx_link, jsonString.wx_link);
+
+    
     return custom_theme;
 
 }

index.html

@@ -160,7 +160,6 @@
   <script src="libs/scripts/prettify.min.js"></script>
   <script src="libs/scripts/index.js"></script>
   <script src="libs/scripts/jquery.min.js"></script>
-  <script src="libs/scripts/json5.js"></script>
 
   <script src="assets/scripts/sync-scroll.js"></script>
   <script src="assets/scripts/themes/default-theme.js"></script>