Next.js 14 App Router中MDX删除线无法正常显示求助

问题现象 #

• 使用Next.js 14 App Router搭配MDX格式文档，除删除线外所有Markdown语法均可正常渲染
• 用~~this is my strikethrough~~格式添加的删除线，在VS Code中显示正常，但页面上直接显示原符号而非删除线效果
• 依赖配置如下：

"dependencies": {
    "@mdx-js/loader": "^3.0.1",
    "@mdx-js/react": "^3.0.1",
    "@next/mdx": "^14.1.1",
    "@types/mdx": "^2.0.11",
    "bootstrap": "^5.3.2",
    "clsx": "^2.1.0",
    "next": "14.1.0",
    "react": "^18",
    "react-bootstrap": "^2.10.1",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "typescript": "^5"
  }

• 已按Next.js官方指南配置next.config.js和src/mdx-components.tsx

解决步骤 #

1. 启用GFM语法支持 #

MDX默认的remark解析器未启用GitHub Flavored Markdown（GFM）扩展，而删除线属于GFM语法，需安装并配置remark-gfm插件：

• 安装依赖：

npm install remark-gfm
# 或使用yarn
yarn add remark-gfm

• 修改next.config.js，在MDX配置中添加该插件：

import createMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'

const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
}

const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkGfm], // 启用GFM，包含删除线、表格等扩展语法
    rehypePlugins: [],
  },
})

export default withMDX(nextConfig)

2. 检查MDX组件配置 #

确保src/mdx-components.tsx未错误覆盖<del>标签的渲染逻辑，若有自定义组件需保证其正常输出删除线：

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // 要么不自定义del标签，要么明确渲染为<del>元素
    del: ({ children }) => <del>{children}</del>,
    ...components,
  }
}

3. 确认样式未被覆盖 #

部分CSS框架（如Bootstrap）可能重置了<del>标签的样式，可手动添加样式确保删除线显示：

del {
  text-decoration: line-through !important;
}

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