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