CODEWITHSUNDEEP
reactjsnext.jstinymcemarkdown
KushagraMish
KushagraMish

Reputation: 335

Any way to render HTML in react-markdown

I am using tinymce to accept markdown data from user. The output data is html. I want to display that data on a page. I am using react-markdown for it. I can see data on page but it's HTML tags. Is there any way to show HTML page not tags?

export default function ThePage() {
  const markdown = {
    description: "<p>Hello from the other </p>\n<p><strong>side</strong></p>",
  }

  return (
    <>
      <ReactMarkdown children={markdown.description} />
    </>
  );
}

Upvotes: 24

Views: 30670

Answers (3)

akshay.babu
akshay.babu

Reputation: 11

The approach would be

Step #1 Convert markdown to HTML string

Step #2 Render HTML string in Next.js JSX

For Step #1, I went with "npm i markdown-to-jsx"

For Step #2, I followed the tailwindcss typography guide from https://github.com/tailwindlabs/tailwindcss-typography

The steps are as follows:

  1. Install the plugin from npm:

    npm install -D @tailwindcss/typography

  2. Add the plugin to your tailwind.config.js file:

    module.exports = {
      theme: {
        // ...
      },
      plugins: [
        require('@tailwindcss/typography'), // add this line
        // ...
      ],
    }

  1. Add the "prose" tailwind class to the div which is going to contain the html string

<div className="prose">{markdownToHTML}</div>

  1. Follow the tailwindcss typography guide for advanced styling

Upvotes: 1

tromgy
tromgy

Reputation: 5853

The ReactMarkdown component is for rendering mark down, not HTML mark up 😏. Given HTML input it just escapes it, and that's why you see it as "source", not formatted text.

If you need to use it with HTML you need to apply a plugin, such as rehypeRaw :

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

//...

export default function ThePage() {
  const markdown = {
    description: "<p>Hello from the other </p>\n<p><strong>side</strong></p>"
  }

  return (
    <>
      <ReactMarkdown children={markdown.description} rehypePlugins={[rehypeRaw]} />
    </>
  );
}

Upvotes: 58

Paiman Rasoli
Paiman Rasoli

Reputation: 1214

Yes you can use react-render-markup see example:

import { Markup } from "react-render-markup";
 export default function App(){
 return(<Markup markup={markdown.description} />)
 }

Upvotes: 4

Related Questions