reactjs - 使用 react-markdown 渲染的降价中不存在行分隔符

Question

我react-markdown用来渲染降价。文本内容正确呈现，但我无法查看标题下和表格的行分隔符。我尝试在演示中粘贴相同的内容，https://remarkjs.github.io/react-markdown/并使用 line separators 正确呈现。

以下是实现的代码框链接。https://codesandbox.io/s/strange-firefly-zzv3r?file=/src/App.js。注意：该表在行和列之间没有行分隔符。为了呈现表格，我使用remark-gfm了文档中提到的react-markdown

以下是呈现降价的 React 组件

import React, { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

export default function App() {
  const markdown = `# First Heading

  ## SomeHeading()
  Returns some heading if found to be true .
  
  **Syntax:** "SomeHeading(string; search-text; [case-insensitive])"
  |Parameter|Data type|Optional|Text|
  |--|--|--|--|
  |string|string|NO|The text to search in|
  |search-text|string|NO|The string to check|
  |case-insensitive|boolean|YES|set “true” if the search should be case insensitive.|
    `;

  return (
    <div className='post'>
      <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />
    </div>
  );
}

Answer 1

在您的示例中，降价中的所有行都以 2 个空格开头。行首的空格在 Markdown 中并不是没有意义的。