diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index a91ac06..5d702e3 100644 --- a/src/pages/index/index.jsx +++ b/src/pages/index/index.jsx @@ -32,6 +32,7 @@ import OriginMark from "./conpoments/OriginMark/index"; marked.setOptions({ breaks: true, // 是否回车换行 + gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范 highlight(code, lang) { // 语法高亮 let val = code; @@ -118,7 +119,7 @@ renderer.heading = function (text, level, raw) { // 分隔符 renderer.hr = function () { // return '
\n'; - return "
➖➖➖➖➖
"; + return "➖➖➖➖➖
"; }; // 内联样式,使用直角引号「」 @@ -137,11 +138,84 @@ renderer.blockquote = function (quote) { // console.log(content); } //

-  return `\t👉${content} `;
+  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" + ); +}; + +// renderer.tablerow = function (content) { +// console.log("tablerow===>",content) +// return `\n${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`; +// }; + // 使用拓展 marked.use({ renderer }); +// marked.use(`marked-code-jsx-renderer`); +// marked.use(`marked-extended-tables`); // ![测试图片2](http://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/202304081955211.png) @@ -169,22 +243,28 @@ const Index = () => { const [markText, setmarkText] = useState(null); const [oldmarkText, setoldmarkText] = useState(null); const [currentRender, setcurrentRender] = useState(null); + const [markdownTable, setmarkdownTable] = useState(` + | 11 | 12 | 13 | + | --- | --- | --- | + | 21 | 22 | 23 | + | 31 | 32 | 33 | + | 41 | 42 | 43 | + `); const onConfirm = (onConfirmtxt) => { console.log("onConfirmtxt--->", onConfirmtxt.detail.value); }; const onBlur = (onBlurtxt) => { console.log("onBlurtxt--->", onBlurtxt.detail.value); - if(onBlurtxt.detail.value){ + if (onBlurtxt.detail.value) { setmarkText(onBlurtxt.detail.value); } }; const onInput = (onInputtxt) => { console.log("onInputtxt--->", onInputtxt.detail.value); - if(onInputtxt.detail.value){ + if (onInputtxt.detail.value) { setmarkText(onInputtxt.detail.value); } - }; const onBridgeReady = () => { @@ -192,10 +272,7 @@ const Index = () => { }; useEffect(() => { - // console.log("markTextStr=>", markTextStr); - // setmarkText(markTextStr); setmarkText(null); - }, []); return ( @@ -205,9 +282,12 @@ const Index = () => { style="background:#fff;width:100%;min-height:80px;padding:0 30rpx;" autoHeight autoFocus + focus onConfirm={onConfirm} // onBlur={onBlur} onInput={onInput} + maxlength={-1} + showCount /> {markText ? ( @@ -216,6 +296,13 @@ const Index = () => { dangerouslySetInnerHTML={{ __html: marked(markText) }} > ) : null} + + {markdownTable ? ( + + ) : null} diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index dde5d52..ceebe8b 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -14,7 +14,7 @@ body { .left { width: 30%; - height: 500px; + min-height: 500px; // background-color: yellow; border: 1px solid red; padding: 20px;