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} />
</>
);
}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]} />
</>
);
}
rehypePlugins={[rehypeRaw] as any}
Yes you can use react-render-markup see example:
import { Markup } from "react-render-markup";
export default function App(){
return(<Markup markup={markdown.description} />)
}
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:
Install the plugin from npm:
npm install -D @tailwindcss/typography
Add the plugin to your tailwind.config.js file:
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/typography'), // add this line
// ...
],
}<div className="prose">{markdownToHTML}</div>
