amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-24 19:10:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/assets/example/theme-css.txt
View File

@ -1,48 +1,51 @@
/* /*
按Ctrl+F可格式化 按Ctrl+F可格式化
*/ */
/* 一级标题样式 */ /* 一级标题样式 */
h1 { h1 {
} }
/* 二级标题样式 */ /* 二级标题样式 */
h2 { h2 {
} }
/* 三级标题样式 */ /* 三级标题样式 */
h3 { h3 {
} }
/* 四级标题样式 */ /* 四级标题样式 */
h4 { h4 {
} }
/* 图片样式 */ /* 图片样式 */
image { image {
} }
/* 引用样式 */ /* 引用样式 */
blockquote { blockquote {
} }
/* 引用段落样式 */ /* 引用段落样式 */
blockquote_p { blockquote_p {
} }
/* 段落样式 */ /* 段落样式 */
p { p {
} }
/* 行内代码样式 */ /* 分割线样式 */
codespan { hr {
} }
/* 粗体样式 */ /* 行内代码样式 */
strong { codespan {
} }
/* 链接样式 */ /* 粗体样式 */
link { strong {
} }
/* 微信链接样式 */ /* 链接样式 */
wx_link { link {
} }
/* 有序列表样式 */ /* 微信链接样式 */
ol { wx_link {
} }
/* 无序列表样式 */ /* 有序列表样式 */
ul { ol {
} }
/* 列表项样式 */ /* 无序列表样式 */
li { ul {
} }
/* 列表项样式 */
li {
}

12
src/assets/scripts/renderers/wx-renderer.js
View File

@ -3,11 +3,9 @@ import { Renderer } from "marked";
class WxRenderer { class WxRenderer {
constructor(opts) { constructor(opts) {
this.opts = opts; this.opts = opts;
let ENV_STRETCH_IMAGE = true;
let footnotes = []; let footnotes = [];
let footnoteIndex = 0; let footnoteIndex = 0;
let styleMapping = null; let styleMapping = new Map();
const CODE_FONT_FAMILY = const CODE_FONT_FAMILY =
"Menlo, Operator Mono, Consolas, Monaco, monospace"; "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/>`; 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( return `<h4 ${getStyles("h4")}>引用链接</h4><p ${getStyles(
"footnotes" "footnotes"
)}>${footnoteArray.join("\n")}</p>`; )}>${footnoteArray.join("\n")}</p>`;
@ -171,7 +172,7 @@ class WxRenderer {
)}>${text}</figcaption>`; )}>${text}</figcaption>`;
} }
let figureStyles = getStyles("figure"); 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>`; return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;
}; };
renderer.link = (href, title, text) => { renderer.link = (href, title, text) => {
@ -199,8 +200,7 @@ class WxRenderer {
)}>${header}</thead><tbody>${body}</tbody></table></section>`; )}>${header}</thead><tbody>${body}</tbody></table></section>`;
renderer.tablecell = (text, flags) => renderer.tablecell = (text, flags) =>
`<td ${getStyles("td")}>${text}</td>`; `<td ${getStyles("td")}>${text}</td>`;
renderer.hr = () => renderer.hr = () => `<hr ${getStyles("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);">`;
return renderer; return renderer;
}; };
} }

14
src/assets/scripts/themes/default-theme.js
View File

@ -93,11 +93,6 @@ export default {
width: "100% !important", width: "100% !important",
}, },
image_org: {
"border-radius": "4px",
display: "block",
},
ol: { ol: {
"margin-left": "0", "margin-left": "0",
"padding-left": "1em", "padding-left": "1em",
@ -117,6 +112,15 @@ export default {
figure: { figure: {
margin: "1.5em 8px", 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: { inline: {
listitem: { listitem: {

107
src/assets/scripts/util.js
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 prettier from "prettier/standalone";
import prettierMarkdown from "prettier/parser-markdown"; import prettierMarkdown from "prettier/parser-markdown";
import prettierCss from "prettier/parser-postcss"; import prettierCss from "prettier/parser-postcss";
@ -6,13 +6,13 @@ import prettierCss from "prettier/parser-postcss";
// 设置自定义颜色 // 设置自定义颜色
export function setColorWithTemplate(template) { export function setColorWithTemplate(template) {
return function (color) { return function (color) {
let custom_theme = JSON.parse(JSON.stringify(template)); let customTheme = JSON.parse(JSON.stringify(template));
custom_theme.block.h1["border-bottom"] = `2px solid ${color}`; customTheme.block.h1["border-bottom"] = `2px solid ${color}`;
custom_theme.block.h2["background"] = color; customTheme.block.h2["background"] = color;
custom_theme.block.h3["border-left"] = `3px solid ${color}`; customTheme.block.h3["border-left"] = `3px solid ${color}`;
custom_theme.block.h4["color"] = color; customTheme.block.h4["color"] = color;
custom_theme.inline.strong["color"] = color; customTheme.inline.strong["color"] = color;
return custom_theme; return customTheme;
}; };
} }
@ -20,81 +20,82 @@ export const setColorWithCustomTemplate = function setColorWithCustomTemplate(
template, template,
color color
) { ) {
let custom_theme = JSON.parse(JSON.stringify(template)); let customTheme = JSON.parse(JSON.stringify(template));
custom_theme.block.h1["border-bottom"] = `2px solid ${color}`; customTheme.block.h1["border-bottom"] = `2px solid ${color}`;
custom_theme.block.h2["background"] = color; customTheme.block.h2["background"] = color;
custom_theme.block.h3["border-left"] = `3px solid ${color}`; customTheme.block.h3["border-left"] = `3px solid ${color}`;
custom_theme.block.h4["color"] = color; customTheme.block.h4["color"] = color;
custom_theme.inline.strong["color"] = color; customTheme.inline.strong["color"] = color;
return custom_theme; return customTheme;
}; };
// 设置自定义字体大小 // 设置自定义字体大小
export function setFontSizeWithTemplate(template) { export function setFontSizeWithTemplate(template) {
return function (fontSize) { return function (fontSize) {
let custom_theme = JSON.parse(JSON.stringify(template)); let customTheme = JSON.parse(JSON.stringify(template));
custom_theme.block.h1["font-size"] = `${fontSize * 1.14}px`; customTheme.block.h1["font-size"] = `${fontSize * 1.14}px`;
custom_theme.block.h2["font-size"] = `${fontSize * 1.1}px`; customTheme.block.h2["font-size"] = `${fontSize * 1.1}px`;
custom_theme.block.h3["font-size"] = `${fontSize}px`; customTheme.block.h3["font-size"] = `${fontSize}px`;
custom_theme.block.h4["font-size"] = `${fontSize}px`; customTheme.block.h4["font-size"] = `${fontSize}px`;
return custom_theme; return customTheme;
}; };
} }
export const setColor = setColorWithTemplate(default_theme); export const setColor = setColorWithTemplate(defaultTheme);
export const setFontSize = setFontSizeWithTemplate(default_theme); export const setFontSize = setFontSizeWithTemplate(defaultTheme);
export function customCssWithTemplate(jsonString, color, theme) { export function customCssWithTemplate(jsonString, color, theme) {
let custom_theme = JSON.parse(JSON.stringify(theme)); let customTheme = JSON.parse(JSON.stringify(theme));
// block // block
custom_theme.block.h1["border-bottom"] = `2px solid ${color}`; customTheme.block.h1["border-bottom"] = `2px solid ${color}`;
custom_theme.block.h2["background"] = color; customTheme.block.h2["background"] = color;
custom_theme.block.h3["border-left"] = `3px solid ${color}`; customTheme.block.h3["border-left"] = `3px solid ${color}`;
custom_theme.block.h4["color"] = color; customTheme.block.h4["color"] = color;
custom_theme.inline.strong["color"] = color; customTheme.inline.strong["color"] = color;
custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1); customTheme.block.h1 = Object.assign(customTheme.block.h1, jsonString.h1);
custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2); customTheme.block.h2 = Object.assign(customTheme.block.h2, jsonString.h2);
custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3); customTheme.block.h3 = Object.assign(customTheme.block.h3, jsonString.h3);
custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4); customTheme.block.h4 = Object.assign(customTheme.block.h4, jsonString.h4);
custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p); customTheme.block.p = Object.assign(customTheme.block.p, jsonString.p);
custom_theme.block.blockquote = Object.assign( customTheme.block.hr = Object.assign(customTheme.block.hr, jsonString.hr);
custom_theme.block.blockquote, customTheme.block.blockquote = Object.assign(
customTheme.block.blockquote,
jsonString.blockquote jsonString.blockquote
); );
custom_theme.block.blockquote_p = Object.assign( customTheme.block.blockquote_p = Object.assign(
custom_theme.block.blockquote_p, customTheme.block.blockquote_p,
jsonString.blockquote_p jsonString.blockquote_p
); );
custom_theme.block.image = Object.assign( customTheme.block.image = Object.assign(
custom_theme.block.image, customTheme.block.image,
jsonString.image jsonString.image
); );
// inline // inline
custom_theme.inline.strong = Object.assign( customTheme.inline.strong = Object.assign(
custom_theme.inline.strong, customTheme.inline.strong,
jsonString.strong jsonString.strong
); );
custom_theme.inline.codespan = Object.assign( customTheme.inline.codespan = Object.assign(
custom_theme.inline.codespan, customTheme.inline.codespan,
jsonString.codespan jsonString.codespan
); );
custom_theme.inline.link = Object.assign( customTheme.inline.link = Object.assign(
custom_theme.inline.link, customTheme.inline.link,
jsonString.link jsonString.link
); );
custom_theme.inline.wx_link = Object.assign( customTheme.inline.wx_link = Object.assign(
custom_theme.inline.wx_link, customTheme.inline.wx_link,
jsonString.wx_link jsonString.wx_link
); );
custom_theme.block.ul = Object.assign(custom_theme.block.ul, jsonString.ul); customTheme.block.ul = Object.assign(customTheme.block.ul, jsonString.ul);
custom_theme.block.ol = Object.assign(custom_theme.block.ol, jsonString.ol); customTheme.block.ol = Object.assign(customTheme.block.ol, jsonString.ol);
custom_theme.inline.listitem = Object.assign( customTheme.inline.listitem = Object.assign(
custom_theme.inline.listitem, customTheme.inline.listitem,
jsonString.li jsonString.li
); );
return custom_theme; return customTheme;
} }
/** /**