Unable to correctly render <code> tag

[iamzee]

<ReactMarkdown
	className="prose prose-invert mt-5 max-w-7xl"
	rehypePlugins={[rehypeRaw]}
>
	{`<pre>
		<code>    
			unordered_map<int,int> umap;
		</code>
	</pre>`}
</ReactMarkdown>

The above component throws the following error:

The above error occurred in the <int,int> component:

    at int,int
    at code
    at pre
    at div
    at ReactMarkdown (webpack-internal:///./node_modules/react-markdown/lib/react-markdown.js:90:42)
    at div
    at Editorial (webpack-internal:///./pages/problems/[id]/editorial.tsx:40:72)
    at div
    at ProblemNavLayout (webpack-internal:///./components/ProblemNavLayout.tsx:13:26)
    at main
    at HeaderLayout (webpack-internal:///./components/HeaderLayout.tsx:14:26)
    at AuthProvider (webpack-internal:///./context/AuthProvider.tsx:26:26)
    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)
    at MyApp (webpack-internal:///./pages/_app.tsx:53:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20740)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23632)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:71:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:592:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:703:27)

It is unable to escape <int,int> inside <code> tag

"react-markdown": "^8.0.3"
"rehype-raw": "6.1.1",

[wooorm]

Markdown has indent for code. Your string is indented so it's code. Don't indent your string.

[wooorm]

Also, what error? You need to provide much more info...

[iamzee]

I have updated the discussion with the error stack.

[wooorm]

It is unable to escape <int,int> inside <code> tag

It doesn’t “escape”, because it isn’t supposed to escape.

Inside a code element, you are still writing HTML. Have you tried that HTML in a browser? That’s an actual <int,int> element.

It’s the same as writing <code><em>Italics inside code</em></code>.
If you don’t want actual elements, you need to encode things. <code>&lt;em>Not italics inside code&lt;/em></code>.
But why are you even writing HTML in markdown? Markdown has code! Which escapes!

```c
unordered_map<int,int> umap;
```

---

What do you want to happen?

[iamzee]

consider getting the following json from trusted backend...

{"content":"<pre>\n<code>unordered_map<int,int> umap;</code>\n</pre>"}

[wooorm]

That is malformed HTML. That’s an <int,int> element. Which react crashes on. If you can fix it, fix it there.

[iamzee]

I was using this package in emberjs to convert markdown to HTML and I was able to get the expected output for the above json.
Was trying to do the same in React. I thought there must be some plugin in ReactMarkdown to handle this scenario

[wooorm]

If that project does that, it does not follow commonmark.
We follow commonmark.

[iamzee]

I guess, I have to encode the code inside <code> tag before passing it to <ReactMarkdown />.
Thank you for this discussion.

[wooorm]

A reduced test input that also shows an error, is <a,b>.

I agree that it would be good to not crash on this input, and instead handle it somehow.
But, how I’d want to handle it, would likely be to drop the element entirely. Turning it into text seems unsafe.

/cc @remcohaszing @ChristianMurphy

• The HTML parsing spec allows <a,b> as an element.
• React crashes, it allows a very simple subset of elements https://github.com/facebook/react/blob/b6006201b5fdfcc5720160f169b80ddb7b8d7467/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js#L2572-L2575
• document.createElement also crashes, but it allows a lot more things: https://dom.spec.whatwg.org/#dom-document-createelement

I can imagine several solutions to this problem:

1. Keep on crashing: let users add an error boundary.
2. Replace all invalid characters: a,b -> ab or a_b (downside that this might cause scr,ipt to turn into script and such, or foo,directive into something that the user is handling)
3. Ignore the element (either dropping all children or swapping them)
4. Try and serialize as text?

[remcohaszing]

I’d go for 1. I could also see why 3 or 4 can be useful, so maybe add an option to let the user decide.

I think 2 is a bad idea. I think the user should be guided towards making valid content. Crashing, dropping content, or serializing as text help with this. Trying to correct the HTML tags does not. In fact, it could be dangerous to fix <script> tags if the user didn’t intend to write this.

[ChristianMurphy]

I'd prefer option 1 as well.
Option 2, 3, and 4 all feel like they could be done with a rehype plugin in the case folks want content that is valid in HTML, but invalid in React to reworked into something different.