当前位置: 首页 > news >正文

vue MarkdownIt标签多出了<p>标签导致高度变丑

效果如下:
​ [点击并拖拽以移动] ​

F12观察后发现多了

标签包裹,所以要解决

标签。

在 markdown-it 中禁用自动包裹 <p> 标签的方法

要让 markdown-it 渲染的 Markdown 内容不自动包裹 <p> 标签,你可以使用以下两种方法:

方法一:配置 htmlbreaks 选项

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 内容');
// 这将只渲染内联内容,不会添加段落标签

注意事项

  1. 使用 renderInline 方法时:

    • 不会处理块级元素(如标题、列表、代码块等)
    • 只适合纯文本或内联标记(如加粗、斜体、链接等)
  2. 使用配置方法时:

    • 仍然会处理块级元素
    • 只是对段落处理方式有所不同

选择哪种方法取决于你的具体需求。如果需要完全避免块级元素,renderInline 是更好的选择;如果只是需要更灵活地控制段落,配置方法可能更合适。

相关文章:

  • 【实战篇】导入dbc文件
  • 路由过滤实验
  • 【从零实现高并发内存池】thread cache、central cache 和 page cache 回收策略详解
  • 硅基光子学微环谐振器(MRR)技术进展与前沿热点
  • 将python项目打包成Windows后台服务
  • linux常用指令:文件目录类、文件查看类、压缩和解压类
  • Java设计开发商城抢票功能
  • 【文献笔记】LLM-based control code generation using image recognition
  • Redis——五种数据类型
  • 实验五 8255和LED数码管显示实验
  • AOSP的Doze模式-DeepIdle 初识
  • 从彩色打印单行标准九九表学习〖代码情书〗的书写范式(Python/DeepSeek)
  • 定制化 Docsify 文档框架实战分享
  • async-profiler火焰图找出耗CPU方法
  • # 04_Elastic Stack 从入门到实践(四)--2
  • Docker 设置镜像源后仍无法拉取镜像问题排查
  • postman莫名奇妙报错,可能是注释引起的。postman 过滤请求体中的注释。
  • Oracle 19c部署之数据库软件安装(二)
  • 细说STM32单片机FreeRTOS任务管理API函数及多任务编程的实现方法
  • 深入了解v-model的原理:v-model拆分为value属性和input事件,表单类组件的封装并用v-model简化代码
  • 解放日报头版:人民城市共建共享展新卷
  • 伊朗港口爆炸死亡人数升至70人
  • 2025上海车展的三个关键词:辅助驾驶、性价比,AI生态
  • 一个失败的赛季咎由自取,皇马只能把希望留到夏天
  • 106岁东江纵队老战士、四川省侨联名誉主席邱林逝世
  • 从中央政治局会议看经济工作着力点:以高质量发展的确定性应对外部不确定性