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 + `${type}>\n`;
+// };
+
// 使用拓展
marked.use({ renderer });
+// marked.use(`marked-code-jsx-renderer`);
+// marked.use(`marked-extended-tables`);
// 
@@ -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;