chore: fix footnotes and support custom hr style (#111)

This commit is contained in:
Yang Libin 2021-12-01 10:48:49 +08:00 committed by GitHub
parent 050621ad71
commit d962aab8c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 120 additions and 112 deletions

View File

@ -25,6 +25,9 @@ blockquote_p {
/* 段落样式 */
p {
}
/* 分割线样式 */
hr {
}
/* 行内代码样式 */
codespan {
}

View File

@ -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 `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`;
});
if (!footnoteArray.length) {
return "";
}
return `<h4 ${getStyles("h4")}>引用链接</h4><p ${getStyles(
"footnotes"
)}>${footnoteArray.join("\n")}</p>`;
@ -171,7 +172,7 @@ class WxRenderer {
)}>${text}</figcaption>`;
}
let figureStyles = getStyles("figure");
let imgStyles = getStyles(ENV_STRETCH_IMAGE ? "image" : "image_org");
let imgStyles = getStyles("image");
return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;
};
renderer.link = (href, title, text) => {
@ -199,8 +200,7 @@ class WxRenderer {
)}>${header}</thead><tbody>${body}</tbody></table></section>`;
renderer.tablecell = (text, flags) =>
`<td ${getStyles("td")}>${text}</td>`;
renderer.hr = () =>
`<hr style="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);">`;
renderer.hr = () => `<hr ${getStyles("hr")}>`;
return renderer;
};
}

View File

@ -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: {

View File

@ -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;
}
/**