How to turn <custom-tag> into HTML

[zhuxingyu19]

Code

import Markdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';

const markdownSource = `
something
<custom-tag></custom-tag>
`;

function App() {
  return;
  <Markdown
    rehypePlugins={[rehypeRaw]}
    components={{
      'custom-tag': () => {
        return <MyReactComponent />;
      },
      a: ({ children }) => {
        return <a>{children}</a>;
      }
    }}
  >
    {markdownSource}
  </Markdown>;
}


export default App;

I want to turn markdown with custom tags into React Component

[wooorm]

htmlString?

Please, use words to ask your question. I cannot look into your head. Spend time framing your question.

[zhuxingyu19]

I am sorry I have not expressed my idea clearly.
I have tried to republish my problem. Looking forward a reply from you.

[wooorm]

Thank you. The code looks better now. But I do not understand what you want? What do you currently get? What is not good about what you get? What do you want to get?

[zhuxingyu19]

Thank you. Based on your question, I found that rehype-raw supports identifying custom tags. So I checked the use of rehype plugins and found that rehype-sanitize prevents the rendering of custom components.

[wooorm]

Right, it does that. That was not in the code you provided. Please, next time, spend the time putting all the important info in your question.