1

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>
  );
}
Erick
  • 1,098
  • 10
  • 21

1 Answers1

0

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.

Evert
  • 93,428
  • 18
  • 118
  • 189
  • I have tried removing the extra 2 spaces from the beginning of the markdown and it still resolves to the same rendering. – Erick Oct 06 '21 at 02:01
  • Can you update your code, and either fix your 'codesandbox' or use jsbin so it's runnable for testing. Hard to tell what you're actually doing otherwse. – Evert Oct 06 '21 at 02:34