diff --git a/public/index.html b/public/index.html index 4e1cfd4..7247620 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,6 @@ - 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..a54cede --- /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: rgba(27,31,35,.05); + + .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..89872e2 --- /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: rgba(27, 31, 35, .05); + 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/less/github-v2.min.css b/src/assets/less/github-v2.min.css new file mode 100644 index 0000000..74361f4 --- /dev/null +++ b/src/assets/less/github-v2.min.css @@ -0,0 +1,2 @@ +/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */ +.prettyprint{font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#333}ol.linenums{margin-top:0;margin-bottom:0;color:#ccc}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal}@media screen{.str{color:#183691}.kwd{color:#a71d5d}.com{color:#969896}.typ{color:#0086b3}.lit{color:#0086b3}.pun{color:#333}.opn{color:#333}.clo{color:#333}.tag{color:navy}.atn{color:#795da3}.atv{color:#183691}.dec{color:#333}.var{color:teal}.fun{color:#900}} \ No newline at end of file diff --git a/src/assets/scripts/config.js b/src/assets/scripts/config.js index 14e19eb..414f95d 100644 --- a/src/assets/scripts/config.js +++ b/src/assets/scripts/config.js @@ -37,17 +37,29 @@ export default { colorOption: [{ label: '经典蓝', value: 'rgba(15, 76, 129, 1)', - hex: '最新流行' + desc: '最新流行' }, { label: '翡翠绿', value: 'rgba(0, 152, 116, 1)', - hex: '优雅清新' + desc: '优雅清新' }, { label: '活力橘', value: 'rgba(250, 81, 81, 1)', - hex: '热情活泼' + desc: '热情活泼' + } + ], + codeThemeOption: [ + { + label: '微信', + value: 'wechat', + desc: '默认样式' + }, + { + label: 'GitHub', + value: 'github', + desc: '精简风格' } ], form: { diff --git a/src/assets/scripts/renderers/wx-renderer.js b/src/assets/scripts/renderers/wx-renderer.js index 52b8945..48edc29 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,15 @@ const WxRenderer = function (opts) { codeLines.push(`${(line || '
')}`) numbers.push('
  • ') } - let lang = infoString || '' - + const lang = infoString || ''; + const codeTheme = 'github'; return ` -
    - - 
    -                ${codeLines.join('')}
-
    -
    - ` +
    + 
    +                        ${codeLines.join('')}
+
    +
    + `; } 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..40688d7 100644 --- a/src/components/CodemirrorEditor/header.vue +++ b/src/components/CodemirrorEditor/header.vue @@ -23,29 +23,29 @@ - - - {{ font.label }} - Abc - - + + + {{ font.label }} + Abc + + - - - {{ size.label }} - {{ size.desc }} - - + + + {{ size.label }} + {{ size.desc }} + + - - - {{ color.label }} - {{ color.hex }} - - + + + {{ color.label }} + {{ color.desc }} + + @@ -94,7 +94,8 @@ export default { showResetConfirm: false, selectFont: '', selectSize: '', - selectColor: '' + selectColor: '', + selectCodeTheme: 'github' }; }, components: { @@ -114,6 +115,7 @@ export default { currentFont: state=> state.currentFont, currentSize: state=> state.currentSize, currentColor: state=> state.currentColor, + codeTheme: state=> state.codeTheme, nightMode: state=> state.nightMode }) }, @@ -144,6 +146,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,13 +237,23 @@ 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; this.selectSize = this.currentSize; this.selectColor = this.currentColor; + this.selectCodeTheme = this.codeTheme; } } diff --git a/src/store/index.js b/src/store/index.js index 2528675..e195733 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -24,6 +24,7 @@ const state = { currentColor: '', citeStatus: 0, nightMode: false, + codeTheme: 'github', rightClickMenuVisible: false }; const mutations = { @@ -52,6 +53,10 @@ const mutations = { state.currentColor = data; localStorage.setItem('color', data) }, + setCurrentCodeTheme(state, data) { + state.codeTheme = data; + localStorage.setItem('codeTheme', data) + }, setRightClickMenuVisible(state, data) { state.rightClickMenuVisible = data; }, @@ -62,6 +67,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), diff --git a/src/view/CodemirrorEditor.vue b/src/view/CodemirrorEditor.vue index 139cddf..2835ca6 100644 --- a/src/view/CodemirrorEditor.vue +++ b/src/view/CodemirrorEditor.vue @@ -405,5 +405,6 @@ export default {