vue MarkdownIt标签多出了<p>标签导致高度变丑
效果如下:
[点击并拖拽以移动]
F12观察后发现多了
标签包裹,所以要解决
标签。
在 markdown-it 中禁用自动包裹 <p>
标签的方法
要让 markdown-it 渲染的 Markdown 内容不自动包裹 <p>
标签,你可以使用以下两种方法:
方法一:配置 html
和 breaks
选项
const md = require('markdown-it')({html: true, // 允许 HTML 标签breaks: true, // 将换行符转换为 <br>linkify: true // 可选,自动将 URL 转换为链接
});
方法二:使用 renderInline
方法
const md = require('markdown-it')();
const result = md.renderInline('你的 Markdown 内容');
// 这将只渲染内联内容,不会添加段落标签
注意事项
-
使用
renderInline
方法时:- 不会处理块级元素(如标题、列表、代码块等)
- 只适合纯文本或内联标记(如加粗、斜体、链接等)
-
使用配置方法时:
- 仍然会处理块级元素
- 只是对段落处理方式有所不同
选择哪种方法取决于你的具体需求。如果需要完全避免块级元素,renderInline
是更好的选择;如果只是需要更灵活地控制段落,配置方法可能更合适。