How to get the original text of <pre>? I want to use it for copy function.

[caihai123]

const Pre = ({ children }) => {
    return (
      <div className="highlight">
        <pre>{children}</pre>
        <CopyCodeContainer children={children} />
      </div>
    );
  };

   <Markdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeHighlight]}
        skipHtml={true} // 禁止 react-markdown 将 HTML 标签包裹在 <p> 元素内部
        components={{ pre: Pre }}
      >
        {markdown}
      </Markdown>

"Above is a part of my code. I hope to directly pass the original code string to CopyCodeContainer, instead of a JavaScript object."

[remcohaszing]

We don’t have any chinese speakers in our team. Please use English.

[ChristianMurphy]

欢迎来到 Unified JS 社区 @caihai123! 👋
请在论坛上使用英语，谢谢！

---

On your question of how to access the raw text of a <pre> tag.
Could you expand a bit on your goal? What do you want to do with the raw text? Syntax highlighting? Something else?

[caihai123]

"Hello, I would like to obtain the original text to provide a copy button."

[ChristianMurphy]

I'd recommend looking at the solutions in https://github.com/orgs/mdx-js/discussions/1948 which should work here as well.

[caihai123]

Yes, there are indeed a lot of reference materials here. Thank you for your guidance. Thank you.