如何在Next.js中不使用JSX向react-markdown内容内添加新元素？

要在ReactMarkdown生成的<p>标签内添加新标签，直接在components配置中自定义p组件即可，和你已经实现的code组件自定义逻辑一致。

修改后的代码示例 #

<ReactMarkdown
  components={{
    // 保留你已有的code自定义逻辑
    code({ node, inline, className, children, ...props }) {
      const match = /language-(\w+)/.exec(className || '');
      return !inline && match ? (
        <SyntaxHighlighter
          {...props}
          style={a11yDark}
          language={match[1]}
          PreTag="div"
        >
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      ) : (
        <code {...props} className={className}>
          {children}
        </code>
      );
    },
    // 新增p标签的自定义逻辑
    p({ children, ...props }) {
      // 这里可以自由添加你需要的内部标签，示例是在内容前加一个自定义标识
      return (
        <p {...props}>
          <span className="custom-p-marker">📌</span>
          {children}
        </p>
      );
    }
  }}
>
  {content}
</ReactMarkdown>

说明 #

• 自定义p组件时，解构出children（原段落内容）和props（原p标签的属性，比如className、id等），确保原有属性和内容被保留，不影响原有渲染逻辑。
• 在返回的<p>标签内部，你可以插入任意React元素，比如图标、装饰性标签、自定义容器等，完全按需调整内部结构。

内容的提问来源于stack exchange，提问作者Mai Trung Kiến