From d962aab8c82568d5d0b924b48d9af75aa0c0729a Mon Sep 17 00:00:00 2001 From: Yang Libin Date: Wed, 1 Dec 2021 10:48:49 +0800 Subject: [PATCH] chore: fix footnotes and support custom hr style (#111) --- src/assets/example/theme-css.txt | 99 +++++++++--------- src/assets/scripts/renderers/wx-renderer.js | 12 +-- src/assets/scripts/themes/default-theme.js | 14 ++- src/assets/scripts/util.js | 107 ++++++++++---------- 4 files changed, 120 insertions(+), 112 deletions(-) diff --git a/src/assets/example/theme-css.txt b/src/assets/example/theme-css.txt index 61a002b..6613633 100644 --- a/src/assets/example/theme-css.txt +++ b/src/assets/example/theme-css.txt @@ -1,48 +1,51 @@ -/* - 按Ctrl+F可格式化 -*/ -/* 一级标题样式 */ -h1 { -} -/* 二级标题样式 */ -h2 { -} -/* 三级标题样式 */ -h3 { -} -/* 四级标题样式 */ -h4 { -} -/* 图片样式 */ -image { -} -/* 引用样式 */ -blockquote { -} -/* 引用段落样式 */ -blockquote_p { -} -/* 段落样式 */ -p { -} -/* 行内代码样式 */ -codespan { -} -/* 粗体样式 */ -strong { -} -/* 链接样式 */ -link { -} -/* 微信链接样式 */ -wx_link { -} -/* 有序列表样式 */ -ol { -} -/* 无序列表样式 */ -ul { -} -/* 列表项样式 */ -li { -} \ No newline at end of file +/* + 按Ctrl+F可格式化 +*/ +/* 一级标题样式 */ +h1 { +} +/* 二级标题样式 */ +h2 { +} +/* 三级标题样式 */ +h3 { +} +/* 四级标题样式 */ +h4 { +} +/* 图片样式 */ +image { +} +/* 引用样式 */ +blockquote { +} +/* 引用段落样式 */ +blockquote_p { +} +/* 段落样式 */ +p { +} +/* 分割线样式 */ +hr { +} +/* 行内代码样式 */ +codespan { +} +/* 粗体样式 */ +strong { +} +/* 链接样式 */ +link { +} +/* 微信链接样式 */ +wx_link { +} +/* 有序列表样式 */ +ol { +} +/* 无序列表样式 */ +ul { +} +/* 列表项样式 */ +li { +} diff --git a/src/assets/scripts/renderers/wx-renderer.js b/src/assets/scripts/renderers/wx-renderer.js index 4ce10d5..46a1bdf 100644 --- a/src/assets/scripts/renderers/wx-renderer.js +++ b/src/assets/scripts/renderers/wx-renderer.js @@ -3,11 +3,9 @@ import { Renderer } from "marked"; class WxRenderer { constructor(opts) { this.opts = opts; - let ENV_STRETCH_IMAGE = true; - let footnotes = []; let footnoteIndex = 0; - let styleMapping = null; + let styleMapping = new Map(); const CODE_FONT_FAMILY = "Menlo, Operator Mono, Consolas, Monaco, monospace"; @@ -62,6 +60,9 @@ class WxRenderer { } return `[${x[0]}] ${x[1]}: ${x[2]}
`; }); + if (!footnoteArray.length) { + return ""; + } return `

引用链接

${footnoteArray.join("\n")}

`; @@ -171,7 +172,7 @@ class WxRenderer { )}>${text}`; } let figureStyles = getStyles("figure"); - let imgStyles = getStyles(ENV_STRETCH_IMAGE ? "image" : "image_org"); + let imgStyles = getStyles("image"); return `
${text}${subText}
`; }; renderer.link = (href, title, text) => { @@ -199,8 +200,7 @@ class WxRenderer { )}>${header}${body}`; renderer.tablecell = (text, flags) => `${text}`; - renderer.hr = () => - `
`; + renderer.hr = () => `
`; return renderer; }; } diff --git a/src/assets/scripts/themes/default-theme.js b/src/assets/scripts/themes/default-theme.js index 6e2268e..ccb2266 100644 --- a/src/assets/scripts/themes/default-theme.js +++ b/src/assets/scripts/themes/default-theme.js @@ -93,11 +93,6 @@ export default { width: "100% !important", }, - image_org: { - "border-radius": "4px", - display: "block", - }, - ol: { "margin-left": "0", "padding-left": "1em", @@ -117,6 +112,15 @@ export default { figure: { margin: "1.5em 8px", }, + hr: { + "border-style": "solid", + "border-width": "1px 0 0", + "border-color": "rgba(0,0,0,0.1)", + "-webkit-transform-origin": "0 0", + "-webkit-transform": "scale(1, 0.5)", + "transform-origin": "0 0", + transform: "scale(1, 0.5)", + }, }, inline: { listitem: { diff --git a/src/assets/scripts/util.js b/src/assets/scripts/util.js index 4cadbdf..d8f1754 100644 --- a/src/assets/scripts/util.js +++ b/src/assets/scripts/util.js @@ -1,4 +1,4 @@ -import default_theme from "./themes/default-theme"; +import defaultTheme from "./themes/default-theme"; import prettier from "prettier/standalone"; import prettierMarkdown from "prettier/parser-markdown"; import prettierCss from "prettier/parser-postcss"; @@ -6,13 +6,13 @@ import prettierCss from "prettier/parser-postcss"; // 设置自定义颜色 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; + let customTheme = JSON.parse(JSON.stringify(template)); + customTheme.block.h1["border-bottom"] = `2px solid ${color}`; + customTheme.block.h2["background"] = color; + customTheme.block.h3["border-left"] = `3px solid ${color}`; + customTheme.block.h4["color"] = color; + customTheme.inline.strong["color"] = color; + return customTheme; }; } @@ -20,81 +20,82 @@ 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; + let customTheme = JSON.parse(JSON.stringify(template)); + customTheme.block.h1["border-bottom"] = `2px solid ${color}`; + customTheme.block.h2["background"] = color; + customTheme.block.h3["border-left"] = `3px solid ${color}`; + customTheme.block.h4["color"] = color; + customTheme.inline.strong["color"] = color; + return customTheme; }; // 设置自定义字体大小 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; + let customTheme = JSON.parse(JSON.stringify(template)); + customTheme.block.h1["font-size"] = `${fontSize * 1.14}px`; + customTheme.block.h2["font-size"] = `${fontSize * 1.1}px`; + customTheme.block.h3["font-size"] = `${fontSize}px`; + customTheme.block.h4["font-size"] = `${fontSize}px`; + return customTheme; }; } -export const setColor = setColorWithTemplate(default_theme); -export const setFontSize = setFontSizeWithTemplate(default_theme); +export const setColor = setColorWithTemplate(defaultTheme); +export const setFontSize = setFontSizeWithTemplate(defaultTheme); export function customCssWithTemplate(jsonString, color, theme) { - let custom_theme = JSON.parse(JSON.stringify(theme)); + let customTheme = 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; + customTheme.block.h1["border-bottom"] = `2px solid ${color}`; + customTheme.block.h2["background"] = color; + customTheme.block.h3["border-left"] = `3px solid ${color}`; + customTheme.block.h4["color"] = color; + customTheme.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, + customTheme.block.h1 = Object.assign(customTheme.block.h1, jsonString.h1); + customTheme.block.h2 = Object.assign(customTheme.block.h2, jsonString.h2); + customTheme.block.h3 = Object.assign(customTheme.block.h3, jsonString.h3); + customTheme.block.h4 = Object.assign(customTheme.block.h4, jsonString.h4); + customTheme.block.p = Object.assign(customTheme.block.p, jsonString.p); + customTheme.block.hr = Object.assign(customTheme.block.hr, jsonString.hr); + customTheme.block.blockquote = Object.assign( + customTheme.block.blockquote, jsonString.blockquote ); - custom_theme.block.blockquote_p = Object.assign( - custom_theme.block.blockquote_p, + customTheme.block.blockquote_p = Object.assign( + customTheme.block.blockquote_p, jsonString.blockquote_p ); - custom_theme.block.image = Object.assign( - custom_theme.block.image, + customTheme.block.image = Object.assign( + customTheme.block.image, jsonString.image ); // inline - custom_theme.inline.strong = Object.assign( - custom_theme.inline.strong, + customTheme.inline.strong = Object.assign( + customTheme.inline.strong, jsonString.strong ); - custom_theme.inline.codespan = Object.assign( - custom_theme.inline.codespan, + customTheme.inline.codespan = Object.assign( + customTheme.inline.codespan, jsonString.codespan ); - custom_theme.inline.link = Object.assign( - custom_theme.inline.link, + customTheme.inline.link = Object.assign( + customTheme.inline.link, jsonString.link ); - custom_theme.inline.wx_link = Object.assign( - custom_theme.inline.wx_link, + customTheme.inline.wx_link = Object.assign( + customTheme.inline.wx_link, jsonString.wx_link ); - custom_theme.block.ul = Object.assign(custom_theme.block.ul, jsonString.ul); - custom_theme.block.ol = Object.assign(custom_theme.block.ol, jsonString.ol); - custom_theme.inline.listitem = Object.assign( - custom_theme.inline.listitem, + customTheme.block.ul = Object.assign(customTheme.block.ul, jsonString.ul); + customTheme.block.ol = Object.assign(customTheme.block.ol, jsonString.ol); + customTheme.inline.listitem = Object.assign( + customTheme.inline.listitem, jsonString.li ); - return custom_theme; + return customTheme; } /**