feature: code theme free

2024-11-24 19:10:34 +08:00 · 2020-07-19 15:46:05 +08:00 · 2020-07-19 15:46:05 +08:00 · ae03343d27
commit ae03343d27
parent 0b9ba2252a
8 changed files with 223 additions and 112 deletions
--- a/src/assets/less/app.less
+++ b/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;
--- a/src/assets/less/code-theme.less
+++ b/src/assets/less/code-theme.less
@ -0,0 +1,2 @@
+@import './codeTheme/wechat-code-block.less';
+@import './codeTheme/github-code-block.less';
--- a/src/assets/less/codeTheme/github-code-block.less
+++ b/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;
+    }
+}
--- a/src/assets/less/codeTheme/wechat-code-block.less
+++ b/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;
+}
--- a/src/assets/scripts/config.js
+++ b/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
--- a/src/assets/scripts/renderers/wx-renderer.js
+++ b/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
@ -68,22 +69,22 @@ const WxRenderer = function (opts) {

    this.buildAddition = () => {
        return `
-    <style>
-      .preview-wrapper pre::before {
-        font-family: "SourceSansPro", "HelveticaNeue", Arial, sans-serif;
-        position: absolute;
-        top: 0;
-        right: 0;
-        color: #ccc;
-        text-align: center;
-        font-size: 0.8em;
-        padding: 5px 10px 0;
-        line-height: 15px;
-        height: 15px;
-        font-weight: 600;
-      }
-    </style>
-    `
+            <style>
+            .preview-wrapper pre::before {
+                font-family: "SourceSansPro", "HelveticaNeue", Arial, sans-serif;
+                position: absolute;
+                top: 0;
+                right: 0;
+                color: #ccc;
+                text-align: center;
+                font-size: 0.8em;
+                padding: 5px 10px 0;
+                line-height: 15px;
+                height: 15px;
+                font-weight: 600;
+            }
+            </style>
+        `
    }

    this.setOptions = newOpts => {
@ -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 `
-        <section class="code-snippet__fix 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>
-        `
+            switch (codeTheme) {
+                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>`
--- a/src/components/CodemirrorEditor/header.vue
+++ b/src/components/CodemirrorEditor/header.vue
@ -23,29 +23,39 @@
        </el-tooltip>
        <el-form size="mini" class="ctrl" :inline=true>
            <el-form-item>
-            <el-select v-model="selectFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
-                <el-option v-for="font in config.builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
-                :label="font.label" :value="font.value">
-                    <span class="select-item-left">{{ font.label }}</span>
-                    <span class="select-item-right">Abc</span>
-                </el-option>
-            </el-select>
+                <el-select v-model="selectFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
+                    <el-option v-for="font in config.builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
+                    :label="font.label" :value="font.value">
+                        <span class="select-item-left">{{ font.label }}</span>
+                        <span class="select-item-right">Abc</span>
+                    </el-option>
+                </el-select>
            </el-form-item>
            <el-form-item>
-            <el-select v-model="selectSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
-                <el-option v-for="size in config.sizeOption" :key="size.value" :label="size.label" :value="size.value">
-                    <span class="select-item-left">{{ size.label }}</span>
-                    <span class="select-item-right">{{ size.desc }}</span>
-                </el-option>
-            </el-select>
+                <el-select v-model="selectSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
+                    <el-option v-for="size in config.sizeOption" :key="size.value" :label="size.label" :value="size.value">
+                        <span class="select-item-left">{{ size.label }}</span>
+                        <span class="select-item-right">{{ size.desc }}</span>
+                    </el-option>
+                </el-select>
            </el-form-item>
            <el-form-item>
-            <el-select v-model="selectColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
-                <el-option v-for="color in config.colorOption" :key="color.value" :label="color.label" :value="color.value">
-                    <span class="select-item-left">{{ color.label }}</span>
-                    <span class="select-item-right">{{ color.hex }}</span>
-                </el-option>
-            </el-select>
+                <el-select v-model="selectColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
+                    <el-option v-for="color in config.colorOption" :key="color.value" :label="color.label" :value="color.value">
+                        <span class="select-item-left">{{ color.label }}</span>
+                        <span class="select-item-right">{{ color.hex }}</span>
+                    </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>
@ -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',
-            'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions'])
+        ...mapMutations([
+            'clearEditorToDefault',
+            'setCurrentColor',
+            'setCiteStatus',
+            'themeChanged',
+            'setCurrentFont',
+            'setCurrentSize',
+            'setCssEditorValue',
+            'setCurrentCodeTheme',
+            'setWxRendererOptions'
+        ])
    },
    mounted() {
        this.selectFont = this.currentFont;
--- a/src/store/index.js
+++ b/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),