feat: add markdown link dialect

src/components/Display.vue

@@ -31,6 +31,7 @@ const md = markdownit({
 interface ReferenceType {
   href: string;
   title: string;
+  explain: string;
   index: number;
 }
 
@@ -40,6 +41,16 @@ const link_white_list = [
   "mp.weixin.qq.com",
 ];
 
+const parse_a_title = (title: string) => {
+  const regexp = /\s"((?:[^"\\]|\\["\\])*)"$/g;
+  const matches = title.match(regexp);
+  if (matches) {
+    return [title.replace(matches[0], ""), matches[0].slice(2, -1)];
+  } else {
+    return [title, title];
+  }
+};
+
 watchEffect(async () => {
   const parsed = md.render(replace_image_bed(content.value));
 
@@ -54,6 +65,21 @@ watchEffect(async () => {
       return;
     }
 
+    // 如果在p标签中，转换为figure标签
+    if (image.parentElement?.tagName === "P") {
+      const figure = document.createElement("figure");
+      figure.classList.add("image");
+      figure.innerHTML = image.outerHTML;
+
+      // 添加figcaption标签
+      const figcaption = document.createElement("figcaption");
+      figcaption.innerHTML = image.getAttribute("alt") || "";
+      figure.appendChild(figcaption);
+
+      image.parentElement.replaceWith(figure);
+      return;
+    }
+
     // 转换为figure标签
     const figure = document.createElement("figure");
     figure.classList.add("image");
@@ -138,12 +164,17 @@ watchEffect(async () => {
 
     const index = reference.length + 1;
 
+    const [title_, expain] = parse_a_title(title);
+
     reference.push({
       href: href,
-      title: title,
+      title: title_,
+      explain: expain,
       index: index
     });
 
+    link.innerText = title_;
+
     link.removeAttribute("href");
 
     // 在原标签后加入<sup>标签
@@ -174,7 +205,7 @@ watchEffect(async () => {
   const reference_str = reference
     .map((item) => [
       `<span class="reference-container"><span class="reference-index">[${item.index}]</span>`,
-      `<p class="reference-title">${item.title}：`,
+      `<p class="reference-title">${item.explain}：`,
       `<span class="reference-href link">${item.href}</span></p></span>`
     ].join("")).join("\n");
 
@@ -185,7 +216,7 @@ watchEffect(async () => {
   const reference_dom = document.createElement("div");
   reference_dom.innerHTML = parsed_markdown.value;
 
-  console.log(parsed_markdown.value);
+  // console.log(parsed_markdown.value);
 });
 
 const css_regexp = /\@import\((.*?)\)/g;

src/content.ts

@@ -14,7 +14,7 @@ const content = ref<string>(`# 这是大标题
 
 这是一张图片：
 
-![这是一张样例图片，用来展示图片备注](./example.png)
+![这是一张样例图片，用来展示图片备注](https://smartflowai.github.io/jimi-formatter/example.png)
 
 深度学习中，$x$ 通常表示输入，$y$ 通常表示输出，$w$ 通常表示权重，$b$ 通常表示偏置。线性回归的公式为：
 
@@ -53,7 +53,15 @@ links.forEach((link) => {
 
 [WF-VAE: Enhancing Video VAE by Wavelet-Driven Energy Flow for Latent Video Diffusion Model](https://arxiv.org/abs/2411.17459v2)
 
-[HunyuanVideo: A Systematic Framework For Large Video Generative Models](http://arxiv.org/abs/2412.03603)`);
+[HunyuanVideo: A Systematic Framework For Large Video Generative Models "混元视频大模型"](http://arxiv.org/abs/2412.03603)
+
+# 文章分享
+
+[免费 | 万人共学的书生大模型实战营公益课程来啦！](https://mp.weixin.qq.com/s/FaSnM79OrrBiY4HJvR0_gg)
+
+[免费 "万人共学的书生大模型实战营公益课程来啦"](https://mp.weixin.qq.com/s/FaSnM79OrrBiY4HJvR0_gg)
+
+<https://mp.weixin.qq.com/s/dXcxA2lt8_TTmkYYMWxbSA>`);
 
 export const content_cursor_position = ref<number>(0);
 

src/styles/default.css

@@ -95,7 +95,7 @@
     font-size: 0.9em;
     background-color: #31363f;
     color: white;
-    padding: 0.5em;
+    padding: .8em 1em;
     border-radius: 0.3em;
     white-space: break-spaces;
 }