react markdown - iframe tag 적용(youtube첨부)

iframe tag into React Markdown

iframe tag will not be shown in react markdown. If you want to do that you need to import and adapt rehype-plugins.

First you need to install plugins

    npm install rehype-raw
    // and
    npm install rehype-sanitize

and the Second import plugins on the top.

    import rehypeRaw from "rehype-raw";
    import rehypeSanitize, { defaultSchema } from "rehype-sanitize";

What does rehype do?

rehypeRaw is for put HTML tags inside of your .md file. and rehype-sanitize is for sanitize your HTML.

Your code may like this.

    <ReactMarkdown components={customRenderers}>{content}</ReactMarkdown>

Third we need to add rehype-raw and rehype-sanitize

    <ReactMarkdown
              rehypePlugins={[
                rehypeRaw,
                rehypeSanitize({
                  ...defaultSchema,
                  attributes: {
                    ...defaultSchema.attributes,
                    iframe: [...(defaultSchema.attributes.iframe || [])],
                  },
                }),
              ]}
              components={customRenderers}
            >
              {content}
    </ReactMarkdown>

You can add more HTML tags in attributes, or rehypeSanitize will ignore all of your HTML tags.

At last you can add iframe tags inside of your markdown documents.

This works like my blog pages -> Adele - Hello. I hope this is of assistance to you.

---

구글에서 아무리 뒤져도 안나오길래 영어로 검색하는 분들이 많을걸로 예상해서 영어로 설명했습니다.

간단히 요약하면 rehypeRaw를 써야 HTML tag를 쓸 수 있습니다. rehype-sanitize는 HTML 태그를 삭제하는 역할을 합니다. 두가지를 같이 쓰는 이유는 엉뚱한 html태그가 마크다운에서 제멋대로 렌더링이 되면 안되서 지정된 것들만 사용할 수 있도록 해줍니다. attributes내에 더 쓰고 싶은 html 태그를 추가하면 사용할 수 있습니다.