使用markdown-it转换Markdown至Next.js页面时标题渲染失效求助

1. 先确认Markdown转换结果是否正确 #

在代码里打印转换后的内容，检查markdown-it有没有把# abc正确转换成<h1>abc</h1>（不是转义后的<h1>abc</h1>）。如果转换结果不对，检查markdown-it的初始化配置，别禁用标题解析的核心规则：

const md = require('markdown-it')(); // 默认配置就支持标题解析，别加 { disable: ['heading'] } 这类禁用规则

2. 在Next.js里正确渲染HTML字符串 #

React默认会转义HTML内容，直接写{content}会把标签当成纯文本显示。你需要用dangerouslySetInnerHTML来渲染真实的HTML元素：

// 替换原来的渲染代码
<div dangerouslySetInnerHTML={{ __html: content }} />

额外提醒 #

如果你的Markdown内容来自不可信渠道，用dangerouslySetInnerHTML要注意XSS风险，可以配合DOMPurify这类库过滤危险标签；另外也检查下全局样式有没有覆盖标题的默认样式，避免标签渲染正常但没显示放大效果。

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