React-markdown, gfm tables not working 等问题

Question

我一直在尝试使用 react-markdown 库在 react 中渲染 markdown，我有 2 个问题和 1 个我无法回答的问题：

1. 使用 remark-gfm 插件时，表格无法正确呈现。
2. 行间距不像我想要的那样，我可以在段落之间有 5 个新行，渲染输出将只显示 1 个新行。
3. 在复选框选择中，有没有办法更改渲染输出中的选定框？

我的应用有 4 个组件：

1.App.jsx

import "./styles/App.css";
import styled from "styled-components"
import MarkedInput from './components/MarkedInput'
import Result from "./components/Result";
import { useState } from "react";
import EditorContext from "./EditorContext";

const AppContainer = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
`;

const Title = styled.div`
    font-size: 25px;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    margin-bottom: 1em;
`;

const EditorContainer = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
`;

function App() {
    const [markdownText, setMarkdownText] = useState("");
    const contextValue = {
        markdownText,
        setMarkdownText
    };

    return (
        <EditorContext.Provider value={contextValue}>
            <AppContainer>
                <Title>Markdown Editor</Title>
                <EditorContainer>
                    <MarkedInput />
                    <Result />
                </EditorContainer>
            </AppContainer>
        </EditorContext.Provider>
    );
}

export default App;

2。 MarkedInput.jsx

import React from "react";
import { useContext } from "react";
import styled from "styled-components";
import EditorContext from "../EditorContext";

const Container = styled.div`
    width: 50%;
    height: 100%;
    padding: 14px;
    border-right: 1.5px solid rgba(15, 15, 15, 0.4);
    font-family: "Lato", sans-serif;
`;

const Title = styled.div`
    font-size 22px;
    font-weight: 600;
    margin-bottom: 1em;
    padding: 8px 0;
    border-bottom: 1px solid rgba(15, 15, 15, 0.3);
`;

const TextArea = styled.textarea`
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    outline: none;
    font-size: 17px;
`;

function MarkedInput(props) {
    const { setMarkdownText } = useContext(EditorContext);

    const onInputChange = (event) => {
        const newValue = event.currentTarget.value;
        setMarkdownText(newValue);
    };

    return (
        <Container>
            <Title>Markdown Text</Title>
            <TextArea onChange={onInputChange} />
        </Container>
    );
}

export default MarkedInput;

3。我的上下文组件（EditorContext.jsx）

import React from 'react'

const defaulContext = {
    markdownText: "",
    setMarkdownText: () =>{}
}

export default React.createContext(defaulContext)

4。我的结果组件 (Result.jsx)

import React from "react";
import { useContext } from "react";
import { ReactMarkdown } from "react-markdown/lib/react-markdown";
import styled from "styled-components";
import EditorContext from "../EditorContext";
//import remarkGfm from 'https://esm.sh/remark-gfm@3'
import remarkGfm from "remark-gfm";

const Container = styled.div`
    width: 50%;
    height: 100%;
    padding: 13px;
    font-family: "Lato", sans-serif;
`;

const Title = styled.div`
    font-size 22px;
    font-weight: 600;
    margin-bottom: 1em;
    padding: 8px 0;
    border-bottom: 1px solid rgba(15, 15, 15, 0.3);
`;

const ResultArea = styled.div`
    width: 100%;
    heigth: 100%;
    border: none;
    font-size: 17px;
`;

function Result(props) {
    const { markdownText } = useContext(EditorContext);
    return (
        <Container>
            <Title>Converted Text</Title>
            <ResultArea>
                <ReactMarkdown
                    children={markdownText}
                    remarkPlugins={[remarkGfm]}
                ></ReactMarkdown>
            </ResultArea>
        </Container>
    );
}

export default Result;

这是我在项目中使用的依赖项：

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^8.0.5",
    "remark-gfm": "^3.0.1",
    "styled-components": "^5.3.10"
   }

这是一张图片显示

我曾尝试更改调用插件导入的方式，但没有任何效果。 我正在使用：

• 火狐 v112.0.2
• Windows 10 专业版 22H2