`) - return `
${text}` + this.setOptions = newOpts => { + this.opts = merge(this.opts, newOpts) } - renderer.code = (text, infoString) => { - text = text.replace(//g, '>') - let lines = text.split('\n') - let codeLines = [] - let numbers = [] + this.hasFootnotes = () => footnotes.length !== 0 - for (let i = 0; i < lines.length; i++) { - const line = lines[i] - codeLines.push(`
${(line || '
')}`)
- numbers.push('')
- }
- let lang = infoString || ''
+ this.getRenderer = (status) => {
+ footnotes = []
+ footnoteIndex = 0
- return `
+ styleMapping = this.buildTheme(this.opts.theme)
+ let renderer = new marked.Renderer()
+
+ renderer.heading = (text, level) => {
+ switch (level) {
+ case 1:
+ return `${text}
` + case 2: + return `${text}
` + case 3: + return `${text}
` + default: + return `${text}
` + } + } + renderer.paragraph = text => { + if (text.indexOf('`) + return `
${text}` + } + renderer.code = (text, infoString) => { + text = text.replace(//g, '>') + + let lines = text.split('\n') + let codeLines = [] + let numbers = [] + + for (let i = 0; i < lines.length; i++) { + const line = lines[i] + codeLines.push(`
${(line || '
')}`)
+ numbers.push('')
+ }
+ let lang = infoString || ''
+
+ return `
- ${numbers.join('')}
@@ -145,53 +145,53 @@ const WxRenderer = function (opts) {
${text}`
- renderer.listitem = text => `<%s/>${text}`
-
- renderer.list = (text, ordered, start) => {
- text = text.replace(/<\/*p.*?>/g, '')
- let segments = text.split(`<%s/>`)
- if (!ordered) {
- text = segments.join('•')
- return `${text}
` - } - text = segments[0] - for (let i = 1; i < segments.length; i++) { - text = text + i + '.' + segments[i] - } - return `${text}
` - } - renderer.image = (href, title, text) => { - let subText = '' - if (text) { - subText = `${text}`
+ renderer.listitem = text => `<%s/>${text}`
+
+ renderer.list = (text, ordered, start) => {
+ text = text.replace(/<\/*p.*?>/g, '')
+ let segments = text.split(`<%s/>`)
+ if (!ordered) {
+ text = segments.join('•')
+ return `${text}
` + } + text = segments[0] + for (let i = 1; i < segments.length; i++) { + text = text + i + '.' + segments[i] + } + return `${text}
` + } + renderer.image = (href, title, text) => { + let subText = '' + if (text) { + subText = `` + return renderer } - renderer.strong = text => `${text}` - renderer.em = text => `${text}` - renderer.table = (header, body) => `
` - return renderer - } } export default WxRenderer diff --git a/src/scripts/sync-scroll.js b/src/scripts/sync-scroll.js index c9e31bb..611ce62 100644 --- a/src/scripts/sync-scroll.js +++ b/src/scripts/sync-scroll.js @@ -1,23 +1,23 @@ // 左右栏同步滚动 $(document).ready(() => { - let timeout; - $('div.CodeMirror-scroll, #preview').on("scroll", function callback() { - clearTimeout(timeout); + let timeout; + $('div.CodeMirror-scroll, #preview').on("scroll", function callback() { + clearTimeout(timeout); - let source = $(this), - target = $(source.is("#preview") ? 'div.CodeMirror-scroll' : '#preview'); + let source = $(this), + target = $(source.is("#preview") ? 'div.CodeMirror-scroll' : '#preview'); - target.off("scroll"); + target.off("scroll"); - let source0 = source[0]; - let target0 = target[0]; + let source0 = source[0]; + let target0 = target[0]; - let percentage = source0.scrollTop / (source0.scrollHeight - source0.offsetHeight); - let height = percentage * (target0.scrollHeight - target0.offsetHeight); - target0.scrollTo(0, height); + let percentage = source0.scrollTop / (source0.scrollHeight - source0.offsetHeight); + let height = percentage * (target0.scrollHeight - target0.offsetHeight); + target0.scrollTo(0, height); - timeout = setTimeout(() => { - target.on("scroll", callback); - }, 100); - }); + timeout = setTimeout(() => { + target.on("scroll", callback); + }, 100); + }); }); diff --git a/src/scripts/util.js b/src/scripts/util.js index 106b214..aa48894 100644 --- a/src/scripts/util.js +++ b/src/scripts/util.js @@ -1,11 +1,25 @@ -import default_theme from './themes/default-theme' +import default_theme from './themes/default-theme' import prettier from 'prettier/standalone' import prettierMarkdown from 'prettier/parser-markdown' // 设置自定义颜色 -export function setColorWithTemplate (template) { - return function (color) { +export function setColorWithTemplate(template) { + return function (color) { + let custom_theme = JSON.parse(JSON.stringify(template)) + custom_theme.block.h1['border-bottom'] = `2px solid ${color}` + custom_theme.block.h2['background'] = color + custom_theme.block.h3['border-left'] = `3px solid ${color}` + custom_theme.block.h4['color'] = color + custom_theme.inline.strong['color'] = color + return custom_theme + } +} + +export const setColorWithCustomTemplate = function setColorWithCustomTemplate( + template, + color +) { let custom_theme = JSON.parse(JSON.stringify(template)) custom_theme.block.h1['border-bottom'] = `2px solid ${color}` custom_theme.block.h2['background'] = color @@ -13,83 +27,69 @@ export function setColorWithTemplate (template) { custom_theme.block.h4['color'] = color custom_theme.inline.strong['color'] = color return custom_theme - } -} - -export const setColorWithCustomTemplate = function setColorWithCustomTemplate ( - template, - color -) { - let custom_theme = JSON.parse(JSON.stringify(template)) - custom_theme.block.h1['border-bottom'] = `2px solid ${color}` - custom_theme.block.h2['background'] = color - custom_theme.block.h3['border-left'] = `3px solid ${color}` - custom_theme.block.h4['color'] = color - custom_theme.inline.strong['color'] = color - return custom_theme } // 设置自定义字体大小 -export function setFontSizeWithTemplate (template) { - return function (fontSize) { - let custom_theme = JSON.parse(JSON.stringify(template)) - custom_theme.block.h1['font-size'] = `${fontSize * 1.14}px` - custom_theme.block.h2['font-size'] = `${fontSize * 1.1}px` - custom_theme.block.h3['font-size'] = `${fontSize}px` - custom_theme.block.h4['font-size'] = `${fontSize}px` - return custom_theme - } +export function setFontSizeWithTemplate(template) { + return function (fontSize) { + let custom_theme = JSON.parse(JSON.stringify(template)) + custom_theme.block.h1['font-size'] = `${fontSize * 1.14}px` + custom_theme.block.h2['font-size'] = `${fontSize * 1.1}px` + custom_theme.block.h3['font-size'] = `${fontSize}px` + custom_theme.block.h4['font-size'] = `${fontSize}px` + return custom_theme + } } export const setColor = setColorWithTemplate(default_theme) export const setFontSize = setFontSizeWithTemplate(default_theme) -export function customCssWithTemplate (jsonString, color, theme) { - let custom_theme = JSON.parse(JSON.stringify(theme)) - // block - custom_theme.block.h1['border-bottom'] = `2px solid ${color}` - custom_theme.block.h2['background'] = color - custom_theme.block.h3['border-left'] = `3px solid ${color}` - custom_theme.block.h4['color'] = color - custom_theme.inline.strong['color'] = color +export function customCssWithTemplate(jsonString, color, theme) { + let custom_theme = JSON.parse(JSON.stringify(theme)) + // block + custom_theme.block.h1['border-bottom'] = `2px solid ${color}` + custom_theme.block.h2['background'] = color + custom_theme.block.h3['border-left'] = `3px solid ${color}` + custom_theme.block.h4['color'] = color + custom_theme.inline.strong['color'] = color - custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1) - custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2) - custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3) - custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4) - custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p) - custom_theme.block.blockquote = Object.assign( - custom_theme.block.blockquote, - jsonString.blockquote - ) - custom_theme.block.blockquote_p = Object.assign( - custom_theme.block.blockquote_p, - jsonString.blockquote_p - ) - custom_theme.block.image = Object.assign( - custom_theme.block.image, - jsonString.image - ) + custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1) + custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2) + custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3) + custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4) + custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p) + custom_theme.block.blockquote = Object.assign( + custom_theme.block.blockquote, + jsonString.blockquote + ) + custom_theme.block.blockquote_p = Object.assign( + custom_theme.block.blockquote_p, + jsonString.blockquote_p + ) + custom_theme.block.image = Object.assign( + custom_theme.block.image, + jsonString.image + ) - // inline - custom_theme.inline.strong = Object.assign( - custom_theme.inline.strong, - jsonString.strong - ) - custom_theme.inline.codespan = Object.assign( - custom_theme.inline.codespan, - jsonString.codespan - ) - custom_theme.inline.link = Object.assign( - custom_theme.inline.link, - jsonString.link - ) - custom_theme.inline.wx_link = Object.assign( - custom_theme.inline.wx_link, - jsonString.wx_link - ) + // inline + custom_theme.inline.strong = Object.assign( + custom_theme.inline.strong, + jsonString.strong + ) + custom_theme.inline.codespan = Object.assign( + custom_theme.inline.codespan, + jsonString.codespan + ) + custom_theme.inline.link = Object.assign( + custom_theme.inline.link, + jsonString.link + ) + custom_theme.inline.wx_link = Object.assign( + custom_theme.inline.wx_link, + jsonString.wx_link + ) - return custom_theme + return custom_theme } /** @@ -97,77 +97,78 @@ export function customCssWithTemplate (jsonString, color, theme) { * * @param {css字符串} css */ -export function css2json (css) { - // 移除CSS所有注释 - while ( - (open = css.indexOf('/*')) !== -1 && - (close = css.indexOf('*/')) !== -1 - ) { - css = css.substring(0, open) + css.substring(close + 2) - } - - // 初始化返回值 - let json = {} - - while (css.length > 0 && css.indexOf('{') !== -1 && css.indexOf('}') !== -1) { - // 存储第一个左/右花括号的下标 - const lbracket = css.indexOf('{') - const rbracket = css.indexOf('}') - - // 第一步：将声明转换为Object，如： - // `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;` - // ==> - // `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}` - - // 辅助方法：将array转为object - function toObject (array) { - let ret = {} - array.forEach(e => { - const index = e.indexOf(':') - const property = e.substring(0, index).trim() - const value = e.substring(index + 1).trim() - ret[property] = value - }) - return ret +export function css2json(css) { + // 移除CSS所有注释 + let open, close; + while ( + (open = css.indexOf('/*')) !== -1 && + (close = css.indexOf('*/')) !== -1 + ) { + css = css.substring(0, open) + css.substring(close + 2) } - // 切割声明块并移除空白符，然后放入数组中 - let declarations = css - .substring(lbracket + 1, rbracket) - .split(';') - .map(e => e.trim()) - .filter(e => e.length > 0) // 移除所有""空值 + // 初始化返回值 + let json = {} - // 转为Object对象 - declarations = toObject(declarations) + while (css.length > 0 && css.indexOf('{') !== -1 && css.indexOf('}') !== -1) { + // 存储第一个左/右花括号的下标 + const lbracket = css.indexOf('{') + const rbracket = css.indexOf('}') - // 第二步：选择器处理，每个选择器会与它对应的声明相关联，如： - // `h1, p#bar {color: red}` - // ==> - // {"h1": {color: red}, "p#bar": {color: red}} + // 第一步：将声明转换为Object，如： + // `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;` + // ==> + // `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}` - let selectors = css - .substring(0, lbracket) - // 以,切割，并移除空格：`"h1, p#bar, span.foo"` => ["h1", "p#bar", "span.foo"] - .split(',') - .map(selector => selector.trim()) + // 辅助方法：将array转为object + function toObject(array) { + let ret = {} + array.forEach(e => { + const index = e.indexOf(':') + const property = e.substring(0, index).trim() + const value = e.substring(index + 1).trim() + ret[property] = value + }) + return ret + } - // 迭代赋值 - selectors.forEach(selector => { - // 若不存在，则先初始化 - if (!json[selector]) json[selector] = {} - // 赋值到JSON - Object.keys(declarations).forEach(key => { - json[selector][key] = declarations[key] - }) - }) + // 切割声明块并移除空白符，然后放入数组中 + let declarations = css + .substring(lbracket + 1, rbracket) + .split(';') + .map(e => e.trim()) + .filter(e => e.length > 0) // 移除所有""空值 - // 继续下个声明块 - css = css.slice(rbracket + 1).trim() - } + // 转为Object对象 + declarations = toObject(declarations) - // 返回JSON形式的结果串 - return json + // 第二步：选择器处理，每个选择器会与它对应的声明相关联，如： + // `h1, p#bar {color: red}` + // ==> + // {"h1": {color: red}, "p#bar": {color: red}} + + let selectors = css + .substring(0, lbracket) + // 以,切割，并移除空格：`"h1, p#bar, span.foo"` => ["h1", "p#bar", "span.foo"] + .split(',') + .map(selector => selector.trim()) + + // 迭代赋值 + selectors.forEach(selector => { + // 若不存在，则先初始化 + if (!json[selector]) json[selector] = {} + // 赋值到JSON + Object.keys(declarations).forEach(key => { + json[selector][key] = declarations[key] + }) + }) + + // 继续下个声明块 + css = css.slice(rbracket + 1).trim() + } + + // 返回JSON形式的结果串 + return json } @@ -197,9 +198,9 @@ export function isImageIllegal(file) { } export function formatDoc(content) { - const doc = prettier.format(content, { - parser: 'markdown', - plugins: [prettierMarkdown] - }) - return doc -} \ No newline at end of file + const doc = prettier.format(content, { + parser: 'markdown', + plugins: [prettierMarkdown] + }) + return doc +} diff --git a/src/view/CodemirrorEditor.vue b/src/view/CodemirrorEditor.vue index d15d100..02b62c2 100644 --- a/src/view/CodemirrorEditor.vue +++ b/src/view/CodemirrorEditor.vue @@ -14,7 +14,7 @@ />