why does <h1>title<h1> can't wrap by <p> tag even when it's rendered as a string?

[mosade]

const text=`<h1>title<h1>,foofoo`;
<ReactMarkdown>{text}</ReactMarkdown>;

I've seen this issue,but why it can't wrapped by <p> even when it's rendered as a string.

[ChristianMurphy]

Welcome @mosade! 👋

First, let me clarify your intent by asking a few questions:

1. Are you specifically looking for the string to be wrapped in a <p> tag, or are you more generally wondering why the HTML content is not interpreted as HTML?
2. What is your desired behavior or expected output? Do you want the <h1> tag to be interpreted as an actual HTML heading, or do you want the entire string to be treated as plain text?
3. Have you considered using the rehype-raw plugin for react-markdown, which allows rendering raw HTML within the Markdown content?

The reason your example code doesn't wrap the string in a <p> tag is that react-markdown treats the input string a raw HTML block, raw HTML blocks are not wrapped in paragraphs in CommonMark. By default, react-markdown escapes any HTML tags in the input to prevent potential security issues with rendering untrusted HTML. But it is still an HTML block, parsing and rendering are independent of each other.

If you want the <h1> tags to be interpreted as HTML headings, you need to use the rehype-raw plugin, as mentioned in the appendix of the CommonMark spec you provided. This plugin allows rendering raw HTML within Markdown content, but it also introduces potential security risks if the Markdown content is untrusted.

To clarify your intent and provide a more specific solution, please let me know your answers to the questions above. Understanding the actual problem you're trying to solve will help the community give you a more accurate and helpful ideas.

[mosade]

Thank you for your answer. @ChristianMurphy

I want <h1>title</h1> to be treated as plain text. In my opinion, it should be wrapped in a p tag like a regular string. But it's not. Is there any way to do that?

[ChristianMurphy]

Again, it would be really beneficial to give some context on the actual problem you are facing.
Currently you are really focused on what you think is a solution, adding a paragraph (XY Problem).
It's unclear if it will actually or effectively solve the underlying problem.
You can read more on the XY problem here: https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem

To answer your direct question, it is possible to add wrapping tags, through remark/rehype plugins https://unifiedjs.com/learn/