React-markdown、gfm 表不工作和其他问题

Question

I have been trying to render markdown in react using the react-markdown library, I have had 2 problems and 1 question which I have not been able to answer:

1. When using the remark-gfm plug-in the tables do not render correctly.
2. The spacing between lines does not behave the way I want it to, I can have 5 new lines between paragraphs and the render output will only show 1 new line.
3. In a checkbox selection is there a way to change the selected box in the rendered output?

My app has 4 components:

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. My context component (EditorContext.jsx)

import React from 'react'

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

export default React.createContext(defaulContext)

4. My Results Component (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;

This are the dependencies Im using for the project:

  "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"
   }

And here is an image showing the results of my markdown app

I have tried changing the way i call the import for the plugin and that did nothing. Im using:

• Firefox v112.0.2
• Windows 10 pro 22H2

Answer 1

太长了；覆盖浏览器用户代理样式表。

我整个早上都处于同样的情况，但无法弄清楚。我最终检查了我的代码，并在 devTools 中查看了我的 React 代码正在渲染的 HTML。事实证明，<table></table>确实存在，但某些默认样式隐藏了边框和缩进等。

我建议您打开渲染的代码并执行相同的操作。您可能会看到user agent stylesheet为表格生成的 CSS 规则。创建或添加到 CSS 文件以覆盖这些样式。（使用!important）

例如我的改变，

table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    border-color: inherit !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    overflow: auto !important;
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit !important;
    border-style: solid !important;
    border-width: 2px !important;
}