5

I'm currently running into a problem that I can't solve (I've been searching for solutions since this morning, but I can't manage to find what I need).

I created a React app using react-markdown, allowing the user to edit some post-its, whose content is stored in Markdown format in my DB. But the thing is, I discovered there was no way to underline a text (I thought that if you could do it on Discord, then it means that it's the same in Markdown).

What I'd like is a solution allowing me to simply transform this:

**Bold text**
__Underlined text__

Into... well... you know what I mean. It doesn't have to be this exact syntax, but at least something similar. The only thing I've found is to create custom components, which I don't want because it requires using an already existing syntax, or, to convert the Markdown with replace() functions and use dangerouslySetInnerHTML to display it, which I don't want either, because isn't it called "dangerouslySetInnerHTML" for a reason?

I'd really appreciate if someone could help. And by the way, sorry for any grammar mistakes, English isn't my native language...

Guillaume Getkoz
  • 61
  • 1
  • 4

1 Answers1

1

Right now there are no identifiers for underlining text in markdown syntax. But as you know we can achieve it by using html tags in our markdown.

But we don't have to use dangerouslySetInnerHTML in react-markdown for parsing HTML tags. react-markdown (Check Appendix A: HTML in markdown) uses a plugin rehype-raw.

You can question the thing that rehype-raw internally implements allowDangerousHtml:true, but to prevent this , we can wrap our markdown content around Dompurify.sanitize() to reduce code vulnerablity.

I also faced the same problem , so this is the approach I tried and it worked for me .

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import DOMpurify from 'dompurify';
import "./styles.css";

export default function App() {
   const markdown = `
               **Parsing html in react markdown**

               <u>underlined text</u>
              `;

      return (
           <div className="App">
               <ReactMarkdown rehypePlugins={[rehypeRaw]}>
                    {DOMpurify.sanitize(markdown)}
              </ReactMarkdown>
           </div>
       );
}

CodeSandBoxLink

Sonam Gupta
  • 363
  • 2
  • 11