使用 react-markdown 呈现的 markdown 中不存在行分隔符

Question

I am using react-markdown to render a markdown. The text content is rendered correctly but I cannot view the line separators under the heading and for the table. I tried pasting the same content in the demo https://remarkjs.github.io/react-markdown/ and it renders correctly with the line separators.

Following is the codesandbox link for the implementation. https://codesandbox.io/s/strange-firefly-zzv3r?file=/src/App.js . Note: The table does not have line separators between the rows and columns. To render the table, I am using the remark-gfm as mentioned in the documentation for the react-markdown

Following is my React component that renders the markdown

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

In your example all the lines in your markdown start with 2 spaces. Spaces at the beginning of a line are not meaningless in markdown.