Questions tagged [react-markdown]

86 questions
2
votes
1 answer

react-markdown import error with nextjs 11.1 and typescript

This is a next.js SSG project, but on npm run dev I'm getting below error when trying to import react-markdown. I cant past this step to test in next export I understand that react-markdown is a esm package, but I'm not clear on how to import esm…
Kalyan
  • 307
  • 2
  • 14
2
votes
0 answers

How to add filename or title in react syntax hightligting

Hi I've successfully add react syntax hightlight to my project that using gatsbyjs and strapi, from strapi the content was formatted in markdown so i've add react-markdown and react-syntax-hightlight to handle rendering and syntax hightlighting in…
2
votes
2 answers

"Error: Not supported" when caused by `import("react-markdown")`

I'm trying to import react-markdown, but I'm getting Error: Not supported module.exports = import("react-markdown");
2
votes
2 answers

Adding multiple line break in react-markdown

Currently I'm using React and have content in my rich text in strapi CMS that is spaced out the way I want it in my markdown version, but as soon as I switch to preview, or view the content in my browser, the spaces go away. I have tried adding…
Jay Modi
  • 569
  • 7
  • 24
2
votes
0 answers

react-markdown to render mix of markdown and HTML, will get warning Whitespace text nodes cannot appear as a child of
I need to render content that is a mix of markdown and regular HTML. The content is queried from server, which I can't decide whether there are whitespace inside table. for example the content raw data: # [React](https://reactjs.org/)
React is a…
wtf512
  • 4,487
  • 9
  • 33
  • 55
2
votes
2 answers

Render JSX inside ReactMarkDown

How to render JSX inside ReactMarkDown? I want to wrap my JSX elements inside ReactMarkDown component and achieve something like this, {Some text} {Some text}
2
votes
1 answer

How to parse Embeddable Links from Markdown and render custom React Components

I want to embed Twitter tags from Markdown to Html. I am currently using react-markdown to render like below import gfm from 'remark-gfm' const content = `#Hello

Please check out this tweet


damunga
  • 95
  • 4
  • 11
1
vote
0 answers

React-Markdown Next.js 13 does not render markdown properly, rehypePlugins elements are also ignored

I am trying to implement markdown on my blog built in Next.js 13 using react-markdown and rehypeRaw to allow HTML in it. I am using "use client" in this file. However, my text only shows up when I use markdown (#, ##, etc.) and heading levels are…
1voy
  • 11
  • 3
1
vote
0 answers

Avoiding unnecessary re-rendering of components in react-markdown with Next.js

I'm currently developing a project with Next.js, and in this project, I'm using the react-markdown library. I've encountered a persistent issue related to re-rendering, and I could use some guidance to resolve this. The problem is that the…
1
vote
0 answers

How do you use remark-toc with react-markdown?

I'm using react-markdown in one of my projects and that's been working great so far. I've found that some of my Markdown content is getting long enough that it would be nice to have an autogenerated table of contents based on headings in the…
Bernard Hymmen
  • 825
  • 1
  • 7
  • 14
1
vote
0 answers

Extract specific fields from ReactMarkdown

Hi I'm getting data (a table) as a markdown and displaying it thru ReactMarkdown but i want to extract specific fields lets say I have a markdown like this: [ { "type": "markdown", "data": "| test | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 …
Vedo
  • 976
  • 4
  • 21
1
vote
0 answers

react-markdown in react project

I'm trying to make a markdown editor with React. I am using react-markdown library. I wrote the same as the document, but the conversion does not work. When I check the element in devtools, the tag is changed normally. What could be the problem? //…
Enjoywater
  • 11
  • 2
1
vote
2 answers

How can I embed a youtube video in reactjs markdown with react-markdown

I am new with ReactJS. I have some problems with react-markdown. I want to embed a video using markdown. Here is my simple example of my problem. // import react-markdown import ReactMarkdown from 'react-markdown' // markdown string const md = ` …
USER2022
  • 39
  • 3
1
vote
0 answers

React-markdown 8.0.4 trims white spaces

In previous version of react-markdown library I was using, 4.1.3 I could put space before and after some string and it was not trimmed. After upgrade to 8.0.4 there are trimmed. Is it possible to still have the previous behavior? Example:…
Sheppard25
  • 493
  • 1
  • 7
  • 22
1
vote
0 answers

React Markdown not render properly in React

I am creating dev.to clone for react js practice when trying to render markdown in react-markdown it doesn't render properly, here it is: Post.js import React, { useState } from 'react'; import ReactMarkdown from 'react-markdown'; import…