如何避免MDX渲染带换行的<p>标签时自动添加嵌套<p>标签？

方案1：自定义MDX Paragraph组件，覆盖默认渲染逻辑 #

Docusaurus允许自定义MDX的内置组件，通过替换默认的<p>渲染组件，可避免它自动给内部带换行的内容嵌套额外<p>标签。

1. 在项目中创建自定义组件，比如src/components/CustomParagraph.js：

import React from 'react';

export default function CustomParagraph({ children }) {
  // 直接渲染子元素，跳过MDX默认的自动嵌套逻辑
  return <p>{children}</p>;
}

2. 在docusaurus.config.js中配置MDX组件替换：

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          mdxComponents: {
            p: require.resolve('./src/components/CustomParagraph.js'),
          },
        },
      },
    ],
  ],
};

方案2：优化BeautifulSoup转换流程，兼顾可读性与无换行内容 #

不用完全放弃prettify()，可单独处理<p>标签的内容，将其内部文本和子元素合并为紧凑格式，其他标签保持格式化：

from bs4 import BeautifulSoup

def process_soup(soup):
    # 遍历所有p标签
    for p_tag in soup.find_all('p'):
        content = []
        for child in p_tag.contents:
            if isinstance(child, str):
                # 清理文本中的换行和多余空格
                content.append(child.strip().replace('\n', ' '))
            else:
                # 保留子元素的HTML结构
                content.append(str(child))
        # 重新设置p标签的内容
        p_tag.clear()
        p_tag.append(' '.join(filter(None, content)))
    # 其他标签正常格式化
    return soup.prettify()

# 使用示例
with open('input.html', 'r') as f:
    soup = BeautifulSoup(f.read(), 'html.parser')

processed_html = process_soup(soup)
# 后续将processed_html转换为MDX

方案3：调整MDX的rehype插件配置 #

使用rehype-raw插件直接处理原生HTML，避免MDX对<p>内部内容的二次处理：

1. 安装插件：

npm install rehype-raw

2. 在docusaurus.config.js中添加插件：

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          rehypePlugins: [require('rehype-raw')],
        },
      },
    ],
  ],
};

该插件会让MDX直接解析原生HTML结构，不会自动给<p>内部的换行文本添加额外<p>标签。

内容的提问来源于stack exchange，提问作者Ann Lin