当前位置: 首页 > 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 是更好的选择;如果只是需要更灵活地控制段落,配置方法可能更合适。

http://www.xdnf.cn/news/775.html

相关文章:

  • 前端路由缓存实现
  • ServletContextAttributeListener 的用法笔记250417
  • MYSQL “Too Many Connections“ 错误解决
  • 【Python入门】文件读取全攻略:5种常用格式(csv/excel/word/ppt/pdf)一键搞定 | 附完整代码示例
  • Java基础系列-LinkedList源码解析
  • Vue项目Webpack Loader全解析:从原理到实战配置指南
  • MYOJ_11700(UVA10591)Happy Number(快乐数)(超快解法:图论思想解题)
  • JVM考古现场(二十二):降维打击·用二向箔优化内存模型
  • android如何在生产环境中做到详实的日志收集而不影响性能?
  • 算法之贪心算法
  • 【音视频】音视频FLV合成实战
  • Pikachu靶场-CSRF
  • Golang errors 包快速上手
  • 使用Qt multimedia模块实现简易的视频播放器
  • AI在能源消耗管理及能源效率提升中的核心应用场景及技术实现
  • Java性能剖析工具箱
  • 数据结构——反射、枚举以及lambda表达式
  • Qt 性能优化总结
  • Django 实现物联网管理系统的详细方案
  • 使用 OpenRewrite 简化 Java 和 SpringBoot 迁移
  • SDL基础
  • MATLAB 控制系统设计与仿真 - 34
  • 机器学习 | 细说Deep Q-Network(DQN)
  • 学习笔记十六——Rust Monad从头学
  • 【音视频】FLV格式分析
  • 让SQL飞起来:搭建企业AI应用的SQL性能优化实战
  • 2025年4月16日华为留学生笔试第二题200分
  • VS2022+QT环境配置及基本操作
  • Prometheus thanos架构
  • 2025年4月16日华为留学生笔试第三题300分