diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 5d702e3..b144a5f 100644
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -30,6 +30,33 @@ import { marked } from "marked";
import _ from "lodash";
import OriginMark from "./conpoments/OriginMark/index";
+// marked.use(`marked-code-jsx-renderer`);
+// marked.use(`marked-extended-tables`);
+
+// 
+
+const markTextStr = `
+ ## 标题
+ > 测试引用桔子的样子
+随便测试普通的文本,要不要来个\`内敛\`的字符串
+ ---
+ - 无序列表1
+ 个人有看看
+ - 无序列表2
+ - [ ] 任务列表
+ - [x] 完成任务
+ 1. 测试111
+ 恶魔女哪里的请
+ 2. 你好啊
+ 3. iefw4t43t43t
+ 永远不要相信一个
+ ---
+ 相信我
+ `;
+
+let tablecellArr = [];
+let maxLengthCell=null
+
marked.setOptions({
breaks: true, // 是否回车换行
gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
@@ -44,7 +71,6 @@ marked.setOptions({
return val;
},
});
-
// 符号
// 🔥❓👉
// 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟
@@ -141,115 +167,62 @@ renderer.blockquote = function (quote) {
return `\t👉${content}
`;
};
-function convertToMarkdownTable(input) {
- // 将输入字符串按行分割成数组
- const lines = input.split('\n');
-
- // 定义一个数组来存储Markdown表格的每一行
- const markdownTable = [];
-
- // 迭代处理每一行
- lines.forEach((line, index) => {
- // 去除行两端的空白字符
- const trimmedLine = line.trim();
-
- // 如果行不为空，则处理该行
- if (trimmedLine !== '') {
- // 如果是表头行，则直接添加到markdownTable数组中
- if (index === 0) {
- markdownTable.push(trimmedLine + '
');
- } else {
- // 否则，将行拆分成单元格，并去除两端的空白字符
- const cells = trimmedLine.split('|').slice(1, -1).map(cell => cell.trim());
-
- // 将单元格拼接成一行Markdown表格行，并添加到markdownTable数组中
- markdownTable.push('| ' + cells.join(' | ') + ' |
');
- }
- }
- });
-
- // 将markdownTable数组中的内容拼接成一个字符串，并返回
- return markdownTable.join('\n');
-}
-
-// 示例用法
-const input = ` | 11 | 12 | 13 |
-| --- | --- | --- |
-| 21 | 22 | 23 |
-| 31 | 32 | 33 |
-| 41 | 42 | 43 |`;
-console.log(convertToMarkdownTable(input));
-
-
-
-
-
renderer.table = function (header, body) {
- console.log("header, ===", header);
- console.log(" body===", body);
- console.log('input==>',convertToMarkdownTable(input))
- console.log('${header}
${body}==>',`${header}
${body}`)
-
- // 将表格头和体拼接成一个字符串返回
- return convertToMarkdownTable(input)
-
- if (body) body = `${body}`;
-
- return (
- "\n" + "\n" + header + "\n" + body + "
\n"
- );
+ // return `${header}${body}`;
+ console.log(`📊 表格标题 📊
${header}${body}`);
+ return `📊 表格标题 📊
${header} |${'-'.repeat(maxLengthCell) }| --- | --- |
${body} `;
};
-// renderer.tablerow = function (content) {
-// console.log("tablerow===>",content)
-// return `\n${content}
\n`;
-// };
+// 重写表格头部渲染函数
+renderer.tablerow = function (content) {
+ // console.log(`|${content}
\n`)
+ return `|${content}
\n`;
+};
-// renderer.tablecell = function (content, flags) {
-// console.log("tablecell,flags===>",content)
-// const type = flags.header ? "th" : "td";
-// const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`;
-// return tag + content + `\n`;
-// };
+// 重写表格单元格渲染函数
+renderer.tablecell = function (content, flags) {
+ // 清除其他 HTML 标签，保留 - 和 | 字符
+ content = content.replace(/<(?!br\/)[^>]*>?/gm, "");
+ console.log(`${content} | `);
+ // 添加到数组,并计算最大的字符长度
+ tablecellArr.push(content);
+ console.log("tablecellArr", tablecellArr);
+ const longestString = tablecellArr.reduce(
+ (acc, cur) => {
+ // 获取当前字符串的长度
+ const curLength = cur.length;
+ // 如果当前字符串的长度大于之前记录的最大长度，则更新最大长度和字符串
+ if (curLength > acc.maxLength) {
+ acc.maxLength = curLength;
+ acc.longestString = cur;
+ }
+
+ return acc;
+ },
+ { maxLength: 0, longestString: "" }
+ );
+ // console.log("最长的字符串：", longestString.longestString);
+ // console.log("长度值：", longestString.maxLength);
+ maxLengthCell= longestString.maxLength
+ return `${content} | `;
+};
// 使用拓展
marked.use({ renderer });
-// marked.use(`marked-code-jsx-renderer`);
-// marked.use(`marked-extended-tables`);
-
-// 
-
-const markTextStr = `
- ## 标题
- > 测试引用桔子的样子
-随便测试普通的文本,要不要来个\`内敛\`的字符串
- ---
- - 无序列表1
- 个人有看看
- - 无序列表2
- - [ ] 任务列表
- - [x] 完成任务
- 1. 测试111
- 恶魔女哪里的请
- 2. 你好啊
- 3. iefw4t43t43t
- 永远不要相信一个
- ---
- 相信我
- `;
// export default class Index extends Component {
const Index = () => {
- const [markText, setmarkText] = useState(null);
- const [oldmarkText, setoldmarkText] = useState(null);
- const [currentRender, setcurrentRender] = useState(null);
- const [markdownTable, setmarkdownTable] = useState(`
- | 11 | 12 | 13 |
+ const [markText, setmarkText] = useState(`
+ | 11 ww | 12ww | 13ww |
| --- | --- | --- |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
- | 41 | 42 | 43 |
+ | 41 | 42 | 4333333 |
`);
+ const [oldmarkText, setoldmarkText] = useState(null);
+ const [currentRender, setcurrentRender] = useState(null);
+ const [markdownTable, setmarkdownTable] = useState();
+ const [tablecellArr, settablecellArr] = useState([]);
const onConfirm = (onConfirmtxt) => {
console.log("onConfirmtxt--->", onConfirmtxt.detail.value);
@@ -271,9 +244,7 @@ const Index = () => {
WeixinJSBridge.call("hideOptionMenu");
};
- useEffect(() => {
- setmarkText(null);
- }, []);
+ useEffect(() => {}, []);
return (
@@ -296,13 +267,6 @@ const Index = () => {
dangerouslySetInnerHTML={{ __html: marked(markText) }}
>
) : null}
-
- {markdownTable ? (
-
- ) : null}