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

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

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

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

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