Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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]} />
                Also take a look at github.com/remarkjs/remark-gfm plugin for react-markdown to allow redendering of strikethrough, checkboxes and tables in markdown.
– lky
                Jun 13, 2022 at 12:08
Yes you can use react-render-markup see example:
import { Markup } from "react-render-markup";
 export default function App(){
 return(<Markup markup={markdown.description} />)
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.