react-markdown collapsable Sections

Question

I'm trying to render Collapsable Sections using react-markdown.

import './App.css';
import ReactMarkdown from 'react-markdown'
import collapse from 'remark-collapse';


function App() {
  const markdown = `
### Hello, Markdown!
##### Collapse

This section should be collapsed

###### Other section
Hello other section

  `;

  return (
    <div className="App">
      <header className="App-header">
        <ReactMarkdown
          remarkPlugins={[[collapse, { test: 'Collapse' }]]}
        >
          {markdown}
        </ReactMarkdown>
      </header>
    </div>
  );
}

export default App;

The Collapsable Section is correctly converted to tags, but rendered as text:

    "react-dom": "^18.2.0",
    "react-markdown": "^9.0.1",
    "remark-collapse": "^0.1.2",
    "remark-gfm": "^4.0.0",

The only way I achived to the TAG be rendered is using rehype-raw plugin, but I do not want to include this plugin as it may introduce XSS risks.

Thanks in advance.

Answer 1

From doc (https://github.com/remarkjs/react-markdown#appendix-a-html-in-markdown ) : react-markdown typically escapes HTML (or ignores it, with skipHtml) because it is dangerous and defeats the purpose of this library. However, if you are in a trusted environment (you trust the markdown), and can spare the bundle size (±60kb minzipped), then you can use rehype-raw

Related issue - https://github.com/remarkjs/react-markdown/issues/267#issuecomment-872778339

I hope it will resolve your issue.