update

src/pages/index/index.jsx

@@ -154,7 +154,8 @@ renderer.hr = function () {
 
 // 内联样式,使用直角引号「」
 renderer.codespan = function (text) {
-  return `「${text}」`;
+  // return `「${text}」`;
+  return `『${text}』`;
 };
 
 // 引用符号
@@ -168,130 +169,57 @@ renderer.blockquote = function (quote) {
     // console.log(content);
   }
   // <pre></pre>
-  return `<span style="white-space:pre;" class="blockquote">\t👉${content}</span><br/> `;
+  // &nbsp;
+  return `<span style="white-space:pre;" class="blockquote">\t 👉${content}</span><br/> `;
 };
 
-function formatTable(arr) {
-  // 计算每列的最大宽度
- const maxWidths = Array.from({ length: arr[0].length }, () => 0);
-  arr.forEach((row) => {
-    row.forEach((cell, index) => {
-      const width = cell.replace(/[\u4e00-\u9fa5]/g, "  ").length; // 中文字符算两个宽度
-      maxWidths[index] = Math.max(maxWidths[index], width);
-    });
-  });
-
-  // 使用 &nbsp; 填充每个元素
-  const formattedArr = arr.map((row) =>
-    row
-      .map((cell, index) => {
-        const width = maxWidths[index];
-        const padding = "&nbsp;".repeat(
-          width - cell.replace(/[\u4e00-\u9fa5]/g, "  ").length
-        );
-        return `${cell}${padding}`;
-      })
-      .join(" | ")
-  );
-
-  // 构建 Markdown 表格
-  const markdownTable = formattedArr.map((row) => `|${row} | <br/>`).join("\n");
-
-  return markdownTable;
-}
-
 renderer.table = function (header, body) {
-  console.log("tableRowArr", tableRowArr);
-  // 分析第一个元素中有多少个 | 字符
-  const firstElementPipesCount = tableRowArr[0].split("|").length - 1;
-  console.log("第一个元素中 | 的数量：", firstElementPipesCount);
+  if (body) body = `<tbody>${body}</tbody>`;
 
-  console.log("tablecellArr", tablecellArr);
-  maxLengthCell = tablecellArr.reduce(
-    (max, str) => Math.max(max, str.length),
-    0
+  return (
+    "📊 表格 📊<br/><table>\n" +
+    "<thead>\n" +
+    header +
+    "</thead>\n" +
+    body +
+    "</table>\n"
   );
-
-  // 构建表达式
-  const expression = Array.from({ length: firstElementPipesCount }, () =>
-    "-".repeat(maxLengthCell)
-  ).join(" | ");
-  console.log("expression", expression);
-
-  bodydata = tableRowArr.map((item) =>
-    item
-      .split("|")
-      .map((str) => str.trim())
-      .filter(Boolean)
-  );
-  console.log("bodydata", bodydata);
-  // 测试数据
-  // const data = [
-  //   ['列表1', '列表2'],
-  //   ['这是网址', '你好啊'],
-  //   ['abcd', '你好啊']
-  // ];
-
-  // 格式化表格并输出
-  const formattedTable = formatTable(bodydata);
-  const headerdata = formatTable([[header]]);
-  console.log("headerdata,", headerdata);
-
-  // const maxWidths = 5; // 替换为实际的最大字符宽度
-
-  function calculateWidth(str) {
-    let width = 0;
-    for (let i = 0; i < str.length; i++) {
-      // 判断字符是否是中文，是的话宽度加2，否则加1
-      width += /[\u4e00-\u9fa5]/.test(str[i]) ? 2 : 1;
-    }
-    return width;
-  }
-  
-  const str = '这是网址';
-  const maxWidths = calculateWidth(str);
-  console.log(maxWidths); // 输出字符宽度
-
-
-  console.log("maxWidths", maxWidths);
-  // // 构建表达式
-  // const expression = Array.from({ length: firstElementPipesCount }, () =>
-  //   "-".repeat(maxWidths)
-  // ).join(" | ");
-  // console.log("expression", expression);
-
-  console.log("formattedTable", formattedTable);
-  console.log("{header}", `${header}`);
-  console.log("{body}", `${body}`);
-
-  console.log("{header}${body}", `${header}${body}`);
-  // return `${header}${body}`;
-  console.log(`📊 表格 📊<br/>${header}${body}`);
-
-  // return `📊 表格 📊<br/>${header} |${expression}|<br/>${body} `;
-  return `📊 表格 📊<br/>${header} |${expression}|<br/>${formattedTable} `;
 };
 
-// 重写表格头部渲染函数
 renderer.tablerow = function (content) {
-  // console.log("maxLengthCell", maxLengthCell);
-
-  console.log(`|${content} <br/>\n`);
-  tableRowArr.push(content);
-  return `|${content} <br/>\n`;
+  return `<tr>\n${content}</tr>\n`;
 };
 
-// 重写表格单元格渲染函数
-renderer.tablecell = function (content, flags) {
-  console.log("flags", flags);
-  // 清除其他 HTML 标签，保留 - 和 | 字符
-  content = content.replace(/<(?!br\/)[^>]*>?/gm, "");
-  // console.log(`${content} | `);
-  // 添加到数组,并计算最大的字符长度
-  tablecellArr.push(content);
-  // console.log("tablecellArr", tablecellArr);
 
-  return `${content} | `;
+renderer.tablecell = function (content, flags) {
+  const type = flags.header ? "th" : "td";
+  const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`;
+  return tag + `|${content}` + `</${type}>\n`;
+};
+
+function cleanUrl(href) {
+  try {
+    href = encodeURI(href).replace(/%25/g, '%');
+  } catch (e) {
+    return null;
+  }
+  return href;
+}
+
+renderer.link = function (href, title, text) {
+  const cleanHref = cleanUrl(href);
+  if (cleanHref === null) {
+    return text;
+  }
+  href = cleanHref;
+  let out = '<a href="' + href + '"';
+  if (title) {
+    out += ' title="' + title + '"';
+  }
+  out += ">" +`🌐`+ text + "</a>";
+  // out += ">" +`🌐`+ text + "</a>"+`(${href})`;
+
+  return out;
 };
 
 // 使用拓展
@@ -299,13 +227,7 @@ marked.use({ renderer });
 
 // export default class Index extends Component {
 const Index = () => {
-  const [markText, setmarkText] = useState(`
-  | 列表1 |  列表2  |
-  | --- | --- | 
-  | 这是网址我爱你你好啊| 你好啊| 
-  | abcd | 你好啊 |
-
-  `);
+  const [markText, setmarkText] = useState(``);
   const [oldmarkText, setoldmarkText] = useState(null);
   const [currentRender, setcurrentRender] = useState(null);
   const [markdownTable, setmarkdownTable] = useState();