How to render a custom element tag (<think />) from markdown text?

[amio]

I'm trying to render <think>...</think> from an LLM response text, and I want to either:

• Convert it into a stylable element like <blockquote>...</blockquote>, or
• Preserve the tag name to style it as a custom element (web component), such as <think>...</think>

I've tried using <Markdown allowedElements={['think']}> and <Markdown components={{ think: () => {} }}>, but neither worked as expected. Perhaps I didn't compose it correctly? Is there a way to achieve this?

[JounQin]

Reproduction is required.

You need to use remark-rehype + rehype-raw at least.

[ChristianMurphy]

Start with the HTML guide to keep elements in the pipeline
https://github.com/remarkjs/react-markdown?tab=readme-ov-file#appendix-a-html-in-markdown

Then also include a component renderer for <think>.
That may work, though no guarantees, because <think> is not valid HTML.

[amio]

I tried but couldn't get a clear idea from rehype-raw's document.
Thanks guys, I'll give it another try later.

[kartikm7]

@amio The following is what I'm doing with my project.

<Markdown
      className="markdown"
      rehypePlugins={validation ? [rehypeHighlight, rehypeRaw] : [rehypeHighlight]}
      remarkPlugins={[remarkGfm]}
      components={{
        // @ts-ignore because
        think: (data) => {
          return data.children?.constructor == Array ? <Accordion title={stream ? "Thinking" : "Chain of thought"} content={data.children} loading={stream} initialOpen={stream} /> : <></>

Validation is just a check for if the block is a valid think block or not, you can skip that.
There are some nuances though, like:

// <think> this would be invaild </think>

/* <think> this is valid
</think>
*/

the closing tag needs to be on a new line.
The following is a small helper function that I am using

/**
 * Adds a new line before the ending </customtag>
 * */
export function formatCustomBlock(message: string, tagName: string): string {
  const tag = `</${tagName}>`
  let response = ""
  if (!message.includes(tag)) response = message
  else {
    const position = message.indexOf(tag)
    response = message.slice(0, position) + "\n" + message.slice(position)
  }
  return response
}

Hope this helps!