feat: add basic function for css custom

添加自定义css基础功能

README.md

@@ -38,6 +38,7 @@
 - [10 道 BAT 大厂海量数据面试题（附题解+方法总结）](https://mp.weixin.qq.com/s/rjGqxUvrEqJNlo09GrT1Dw)
 - [阿里又一个 20k+ stars 开源项目诞生，恭喜 fastjson！](https://mp.weixin.qq.com/s/RNKDCK2KoyeuMeEs6GUrow)
 
+注：如果你使用了本 Markdown 编辑器进行文章排版，并且希望将你的文章加入示例列表，欢迎随时提交 PR。
 
 ## 我的公众号
 GitHub 技术社区 Doocs 旗下唯一公众号“Doocs 开源社区”，欢迎关注，专注于分享有价值的文章；当然，也可以加我个人微信（备注：GitHub）。

assets/scripts/editor.js

@@ -11,6 +11,7 @@ let app = new Vue({
         { label: '暗绿', value: 'oceanic-next' }
       ],
       editor: null,
+      cssEditor: null,
       builtinFonts: [
         {
           label: '无衬线',
@@ -34,9 +35,11 @@ let app = new Vue({
       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.showBox = false;
     return d;
   },
   mounted() {
@@ -50,11 +53,25 @@ let app = new Vue({
         mode: 'text/x-markdown'
       }
     );
+    this.cssEditor = CodeMirror.fromTextArea(
+      document.getElementById('cssEditor'),
+      {
+        lineNumbers: false,
+        lineWrapping: true,
+        styleActiveLine: true,
+        matchBrackets: true,
+        theme: this.currentCssEditorTheme,
+        mode: 'application/json'
+      }
+    );
     this.editor.on("change", (cm, change) => {
       this.refresh();
       this.saveEditorContent();
     });
-
+    this.cssEditor.on('update', (instance) => {
+      this.cssChanged();
+      this.saveEditorContent(this.cssEditor, '__css_content');
+    });
     this.wxRenderer = new WxRenderer({
       theme: setColor(this.currentColor),
       fonts: this.currentFont,
@@ -71,6 +88,19 @@ let app = new Vue({
         this.editor.setValue(resp.data);
       })
     }
+
+    if (localStorage.getItem('__css_content')) {
+      this.cssEditor.setValue(localStorage.getItem('__css_content'));
+    } else {
+      axios({
+        method: 'get',
+        url: './assets/scripts/themes/default-theme.js'
+      }).then(resp => {
+        this.cssEditor.setValue(resp.data);
+      }).catch(err => {
+        console.log('无法通过网络请求加载default-theme.js文件');
+      })
+    }
   },
   methods: {
     renderWeChat(source) {
@@ -107,7 +137,13 @@ let app = new Vue({
       });
       this.refresh();
     },
-
+    cssChanged() {
+      let theme = JSON5.parse(this.cssEditor.getValue(0));
+      this.wxRenderer.setOptions({
+        theme: customCss(theme)
+      });
+      this.refresh();
+    },
     // 图片上传结束
     uploaded(response, file, fileList) {
       if (response.success) {
@@ -157,6 +193,16 @@ let app = new Vue({
         localStorage.removeItem("__editor_content");
       }
     },
+    customStyle() {
+      // this.showBox ?
+      //   this.saveEditorContent(this.cssEditor, '__css_content') :
+      //   this.cssEditor.setValue(localStorage.getItem('__css_content'));
+      // this.showBox = !this.showBox;
+
+      this.saveEditorContent(this.cssEditor, '__css_content');
+      this.showBox = !this.showBox;
+      
+    },
     copy() {
       let clipboardDiv = document.getElementById('output');
       clipboardDiv.focus();

assets/scripts/util.js

@@ -12,3 +12,17 @@ function setColorWithTemplate(template) {
 }
 
 let setColor = setColorWithTemplate(default_theme);
+
+function customCssWithTemplate(template) {
+    return function(jsonString) {
+        let custom_theme = JSON.parse(JSON.stringify(template));
+        custom_theme.block.h1 = jsonString.h1;
+        custom_theme.block.h2 = jsonString.h2;
+        custom_theme.block.h3 = jsonString.h3;
+        custom_theme.block.h4 = jsonString.h4;
+        custom_theme.block.p = jsonString.p;
+        return custom_theme;
+    };
+}
+
+let customCss = customCssWithTemplate(default_theme);

index.html

@@ -79,6 +79,9 @@
           </el-form-item>
           <el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
         </el-form>
+        <el-tooltip class="item" effect="dark" content="自定义CSS样式" placement="left">
+          <el-button type="success" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button>
+        </el-tooltip>
         <el-button type="success" plain size="medium" @click="copy">复制</el-button>
         <el-button type="success" plain size="medium" class="about" @click="aboutDialogVisible = true">关于</el-button>
       </el-header>
@@ -96,6 +99,10 @@
               </div>
             </section>
           </el-col>
+          <el-col id="cssBox" :span="8" v-show="showBox">
+            <textarea id="cssEditor" type="textarea" placeholder="Custom css here." v-model="source">
+              </textarea>
+          </el-col>
         </el-row>
       </el-main>
     </el-container>
@@ -125,6 +132,7 @@
   <script src="libs/scripts/index.js"></script>
   <script src="libs/scripts/jquery.min.js"></script>
   <script src="libs/scripts/FuriganaMD.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>