feature: code theme free

src/assets/less/app.less

@@ -1,3 +1,4 @@
+@import './code-theme.less';
 * {
     box-sizing: border-box;
     margin: 0;
@@ -154,69 +155,6 @@ section {
     cursor: pointer;
 }
 
-/*wechat code block*/
-.rich_media_content .code-snippet *,
-.rich_media_content .code-snippet__fix * {
-    max-width: 1000% !important;
-}
-
-.code-snippet__fix {
-    word-wrap: break-word !important;
-    font-size: 14px;
-    margin: 10px 8px;
-    color: #333;
-    position: relative;
-    background-color: rgb(238, 238, 238);
-    border: 1px solid #f0f0f0;
-    border-radius: 2px;
-    display: flex;
-    line-height: 24px;
-}
-
-.code-snippet__fix .code-snippet__line-index {
-    counter-reset: line;
-    flex-shrink: 0;
-    height: 100%;
-    padding: 1em;
-    list-style-type: none;
-}
-
-.code-snippet__fix .code-snippet__line-index li {
-    list-style-type: none;
-    text-align: right;
-}
-
-.code-snippet__fix .code-snippet__line-index li::before {
-    min-width: 1.5em;
-    text-align: right;
-    left: -2.5em;
-    counter-increment: line;
-    content: counter(line);
-    display: inline;
-    color: rgba(0, 0, 0, 0.15);
-}
-
-.code-snippet__fix pre {
-    overflow-x: auto;
-    padding: 1em 1em 1em 1em;
-    white-space: normal;
-    flex: 1;
-    -webkit-overflow-scrolling: touch;
-}
-
-.code-snippet__fix code {
-    text-align: left;
-    font-size: 14px;
-    white-space: pre;
-    display: flex;
-    position: relative;
-    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-}
-
-.code-snippet__fix ul li {
-    list-style: none;
-}
-
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;

src/assets/less/code-theme.less

@@ -0,0 +1,2 @@
+@import './codeTheme/wechat-code-block.less';
+@import './codeTheme/github-code-block.less';

src/assets/less/codeTheme/github-code-block.less

@@ -0,0 +1,47 @@
+/*github code block*/
+.code-snippet__github {
+    display: flex;
+    font-size: 12px;
+    margin: 10px 8px;
+    position: relative; 
+    height: auto;
+    background-color: rgb(238, 238, 238);
+
+    .code-snippet__line-index {
+        display: none;
+    }
+
+    .code__pre {
+        display: grid;
+        position: relative;
+        counter-reset: line;
+        overflow-x: auto;
+        padding: 1em;
+        white-space: normal;
+        flex: 1;
+        line-height: 20px;
+        font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    pre {
+        display: inline-block;
+        font-size: 12px;
+    }
+
+    code {
+        display: flex;
+        position: relative;
+        padding-right: 8px;
+        text-align: left;
+        white-space: pre;
+        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+        &::before {
+            display: none;
+        }
+    }
+
+    ul li {
+        list-style: none;
+    }
+}

src/assets/less/codeTheme/wechat-code-block.less

@@ -0,0 +1,62 @@
+/*wechat code block*/
+.rich_media_content .code-snippet *,
+.rich_media_content .code-snippet__wechat * {
+    max-width: 1000% !important;
+}
+
+.code-snippet__wechat {
+    word-wrap: break-word !important;
+    font-size: 14px;
+    margin: 10px 8px;
+    color: #333;
+    position: relative;
+    background-color: rgb(238, 238, 238);
+    border: 1px solid #f0f0f0;
+    border-radius: 2px;
+    display: flex;
+    line-height: 24px;
+}
+
+.code-snippet__wechat .code-snippet__line-index {
+    counter-reset: line;
+    flex-shrink: 0;
+    height: 100%;
+    padding: 1em;
+    list-style-type: none;
+}
+
+.code-snippet__wechat .code-snippet__line-index li {
+    list-style-type: none;
+    text-align: right;
+}
+
+.code-snippet__wechat .code-snippet__line-index li::before {
+    min-width: 1.5em;
+    text-align: right;
+    left: -2.5em;
+    counter-increment: line;
+    content: counter(line);
+    display: inline;
+    color: rgba(0, 0, 0, 0.15);
+}
+
+.code-snippet__wechat pre {
+    overflow-x: auto;
+    padding: 1em 1em 1em 1em;
+    white-space: normal;
+    flex: 1;
+    -webkit-overflow-scrolling: touch;
+}
+
+.code-snippet__wechat code {
+    text-align: left;
+    font-size: 14px;
+    white-space: pre;
+    display: flex;
+    position: relative;
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
+
+.code-snippet__wechat ul li {
+    list-style: none;
+}

src/assets/scripts/config.js

@@ -50,6 +50,18 @@ export default {
             hex: '热情活泼'
         }
     ],
+    codeThemeOption: [
+        {
+            label: '微信',
+            value: 'wechat',
+            hex: '默认样式'
+        },
+        {
+            label: 'github',
+            value: 'github',
+            hex: '精简风格'
+        }
+    ],
     form: {
         rows: 1,
         cols: 1

src/assets/scripts/renderers/wx-renderer.js

@@ -1,4 +1,5 @@
-import marked from 'marked'
+import marked from 'marked';
+import store from '../../../store/index';
 const WxRenderer = function (opts) {
     this.opts = opts
     let ENV_STRETCH_IMAGE = true
@@ -135,16 +136,35 @@ const WxRenderer = function (opts) {
                 codeLines.push(`<code class="prettyprint"><span class="code-snippet_outer">${(line || '<br>')}</span></code>`)
                 numbers.push('<li></li>')
             }
-            let lang = infoString || ''
+            const lang = infoString || '';
+            const codeTheme = store.state.codeTheme;
+            let result;
 
-            return `
+            switch (codeTheme) {
-        <section class="code-snippet__fix code-snippet__js">
+                case 'wechat':
+                    result = `
+                        <section class="code-snippet__${codeTheme} code-snippet__js">
                             <ul class="code-snippet__line-index code-snippet__js">${numbers.join('')}</ul>
                             <pre class="code__pre code-snippet__js" data-lang="${lang}">
                                 ${codeLines.join('')}
                             </pre>
                         </section>
-        `
+                    `;
+                    break;
+                case 'github':
+                    result = `
+                        <section class="code-snippet__${codeTheme}">
+                            <pre class="code__pre" data-lang="${lang}">
+                                ${codeLines.join('')}
+                            </pre>
+                        </section>
+                    `;
+                    break;
+                default:
+                    break;
+            }
+
+            return result;
         }
         renderer.codespan = (text, infoString) => `<code ${getStyles('codespan')}>${text}</code>`
         renderer.listitem = text => `<span ${getStyles('listitem')}><span style="margin-right: 10px;"><%s/></span>${text}</span>`

src/components/CodemirrorEditor/header.vue

@@ -47,6 +47,16 @@
                     </el-option>
                 </el-select>
             </el-form-item>
+            <el-form-item>
+                <el-select v-model="selectCodeTheme" size="mini" placeholder="选择代码样式" clearable @change="codeThemeChanged">
+                    <el-option v-for="theme in config.codeThemeOption" :key="theme.value"
+                        :label="'代码块样式：' + theme.label"
+                        :value="theme.value">
+                        <span class="select-item-left">{{ theme.label }}</span>
+                        <span class="select-item-right">{{ theme.hex }}</span>
+                    </el-option>
+                </el-select>
+            </el-form-item>
             <el-tooltip content="自定义颜色" :effect="effect" placement="top">
             <el-color-picker v-model="selectColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
             </el-tooltip>
@@ -94,7 +104,8 @@ export default {
             showResetConfirm: false,
             selectFont: '',
             selectSize: '',
-            selectColor: ''
+            selectColor: '',
+            selectCodeTheme: 'wechat'
         };
     },
     components: {
@@ -144,6 +155,10 @@ export default {
             this.setCurrentColor(color);
             this.$emit('refresh')
         },
+        codeThemeChanged(theme) {
+            this.setCurrentCodeTheme(theme);
+            this.$emit('refresh')
+        },
         statusChanged(val) {
             this.setCiteStatus(val)
             this.$emit('refresh')
@@ -231,8 +246,17 @@ export default {
             this.showResetConfirm = false;
             this.editor.focus()
         },
-        ...mapMutations(['clearEditorToDefault','setCurrentColor', 'setCiteStatus', 'themeChanged',
+        ...mapMutations([
-            'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions'])
+            'clearEditorToDefault',
+            'setCurrentColor',
+            'setCiteStatus',
+            'themeChanged',
+            'setCurrentFont',
+            'setCurrentSize',
+            'setCssEditorValue',
+            'setCurrentCodeTheme',
+            'setWxRendererOptions'
+        ])
     },
     mounted() {
         this.selectFont = this.currentFont;

src/store/index.js

@@ -23,7 +23,8 @@ const state = {
     currentSize: '',
     currentColor: '',
     citeStatus: 0,
-    nightMode: false
+    nightMode: false,
+    codeTheme: 'wechat'
 };
 const mutations = {
     setEditorValue(state, data) {
@@ -51,6 +52,10 @@ const mutations = {
         state.currentColor = data;
         localStorage.setItem('color', data)
     },
+    setCurrentCodeTheme(state, data) {
+        state.codeTheme = data;
+        localStorage.setItem('codeTheme', data);
+    },
     themeChanged(state) {
         state.nightMode = !state.nightMode;
     },
@@ -58,6 +63,7 @@ const mutations = {
         state.currentFont = localStorage.getItem('fonts') || config.builtinFonts[0].value
         state.currentColor = localStorage.getItem('color') || config.colorOption[1].value
         state.currentSize = localStorage.getItem('size') || config.sizeOption[2].value
+        state.codeTheme = localStorage.getItem('codeTheme') || config.codeThemeOption[0].value
         state.citeStatus = localStorage.getItem('citeStatus') === 'true'
         state.wxRenderer = new WxRenderer({
             theme: setColor(state.currentColor),