mirror of
https://github.com/doocs/md.git
synced 2024-10-06 12:03:12 +08:00
chore: fix footnotes and support custom hr style (#111)
This commit is contained in:
Yang Libin
GitHub
parent
050621ad71
commit
d962aab8c8
|
|
@ -1,48 +1,51 @@
|
|||
/*
|
||||
按Ctrl+F可格式化
|
||||
*/
|
||||
/* 一级标题样式 */
|
||||
h1 {
|
||||
}
|
||||
/* 二级标题样式 */
|
||||
h2 {
|
||||
}
|
||||
/* 三级标题样式 */
|
||||
h3 {
|
||||
}
|
||||
/* 四级标题样式 */
|
||||
h4 {
|
||||
}
|
||||
/* 图片样式 */
|
||||
image {
|
||||
}
|
||||
/* 引用样式 */
|
||||
blockquote {
|
||||
}
|
||||
/* 引用段落样式 */
|
||||
blockquote_p {
|
||||
}
|
||||
/* 段落样式 */
|
||||
p {
|
||||
}
|
||||
/* 行内代码样式 */
|
||||
codespan {
|
||||
}
|
||||
/* 粗体样式 */
|
||||
strong {
|
||||
}
|
||||
/* 链接样式 */
|
||||
link {
|
||||
}
|
||||
/* 微信链接样式 */
|
||||
wx_link {
|
||||
}
|
||||
/* 有序列表样式 */
|
||||
ol {
|
||||
}
|
||||
/* 无序列表样式 */
|
||||
ul {
|
||||
}
|
||||
/* 列表项样式 */
|
||||
li {
|
||||
}
|
||||
/*
|
||||
按Ctrl+F可格式化
|
||||
*/
|
||||
/* 一级标题样式 */
|
||||
h1 {
|
||||
}
|
||||
/* 二级标题样式 */
|
||||
h2 {
|
||||
}
|
||||
/* 三级标题样式 */
|
||||
h3 {
|
||||
}
|
||||
/* 四级标题样式 */
|
||||
h4 {
|
||||
}
|
||||
/* 图片样式 */
|
||||
image {
|
||||
}
|
||||
/* 引用样式 */
|
||||
blockquote {
|
||||
}
|
||||
/* 引用段落样式 */
|
||||
blockquote_p {
|
||||
}
|
||||
/* 段落样式 */
|
||||
p {
|
||||
}
|
||||
/* 分割线样式 */
|
||||
hr {
|
||||
}
|
||||
/* 行内代码样式 */
|
||||
codespan {
|
||||
}
|
||||
/* 粗体样式 */
|
||||
strong {
|
||||
}
|
||||
/* 链接样式 */
|
||||
link {
|
||||
}
|
||||
/* 微信链接样式 */
|
||||
wx_link {
|
||||
}
|
||||
/* 有序列表样式 */
|
||||
ol {
|
||||
}
|
||||
/* 无序列表样式 */
|
||||
ul {
|
||||
}
|
||||
/* 列表项样式 */
|
||||
li {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user