From ae03343d273b2aee31a1a95a5566b0198fb36405 Mon Sep 17 00:00:00 2001 From: JimQing Date: Sun, 19 Jul 2020 15:46:05 +0800 Subject: [PATCH] feature: code theme free --- src/assets/less/app.less | 64 +---------------- src/assets/less/code-theme.less | 2 + .../less/codeTheme/github-code-block.less | 47 ++++++++++++ .../less/codeTheme/wechat-code-block.less | 62 ++++++++++++++++ src/assets/scripts/config.js | 12 ++++ src/assets/scripts/renderers/wx-renderer.js | 72 ++++++++++++------- src/components/CodemirrorEditor/header.vue | 68 ++++++++++++------ src/store/index.js | 8 ++- 8 files changed, 223 insertions(+), 112 deletions(-) create mode 100644 src/assets/less/code-theme.less create mode 100644 src/assets/less/codeTheme/github-code-block.less create mode 100644 src/assets/less/codeTheme/wechat-code-block.less diff --git a/src/assets/less/app.less b/src/assets/less/app.less index 3dff3fa..6e8ae4b 100644 --- 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; diff --git a/src/assets/less/code-theme.less b/src/assets/less/code-theme.less new file mode 100644 index 0000000..30af9b7 --- /dev/null +++ b/src/assets/less/code-theme.less @@ -0,0 +1,2 @@ +@import './codeTheme/wechat-code-block.less'; +@import './codeTheme/github-code-block.less'; \ No newline at end of file diff --git a/src/assets/less/codeTheme/github-code-block.less b/src/assets/less/codeTheme/github-code-block.less new file mode 100644 index 0000000..2640567 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/src/assets/less/codeTheme/wechat-code-block.less b/src/assets/less/codeTheme/wechat-code-block.less new file mode 100644 index 0000000..f4a2a65 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/assets/scripts/config.js b/src/assets/scripts/config.js index 14e19eb..264e4d3 100644 --- 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 diff --git a/src/assets/scripts/renderers/wx-renderer.js b/src/assets/scripts/renderers/wx-renderer.js index 52b8945..337a982 100644 --- 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 ` - - ` + + ` } this.setOptions = newOpts => { @@ -135,16 +136,35 @@ const WxRenderer = function (opts) { codeLines.push(`${(line || '
')}`) numbers.push('
  • ') } - let lang = infoString || '' + const lang = infoString || ''; + const codeTheme = store.state.codeTheme; + let result; - return ` -
    - - 
    -                ${codeLines.join('')}
-
    -
    - ` + switch (codeTheme) { + case 'wechat': + result = ` +
    + + 
    +                                ${codeLines.join('')}
+
    +
    + `; + break; + case 'github': + result = ` +
    + 
    +                                ${codeLines.join('')}
+
    +
    + `; + break; + default: + break; + } + + return result; } renderer.codespan = (text, infoString) => `${text}` renderer.listitem = text => `<%s/>${text}` diff --git a/src/components/CodemirrorEditor/header.vue b/src/components/CodemirrorEditor/header.vue index 219c87c..f04d757 100644 --- a/src/components/CodemirrorEditor/header.vue +++ b/src/components/CodemirrorEditor/header.vue @@ -23,29 +23,39 @@ - - - {{ font.label }} - Abc - - + + + {{ font.label }} + Abc + + - - - {{ size.label }} - {{ size.desc }} - - + + + {{ size.label }} + {{ size.desc }} + + - - - {{ color.label }} - {{ color.hex }} - - + + + {{ color.label }} + {{ color.hex }} + + + + + + + {{ theme.label }} + {{ theme.hex }} + + @@ -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; diff --git a/src/store/index.js b/src/store/index.js index 0d350e6..ff8372f 100644 --- 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),