【markdown-it插件】markdown格式展示内容（此处结合 element UI 中 Notification 组件 $notify）

最新推荐文章于 2025-08-06 16:42:26 发布

Fighting_p

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量116

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 小工具、插件代码记录文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_53562074/article/details/149936869

vue 同时被 3 个专栏收录

28 篇文章

订阅专栏

代码记录

22 篇文章

订阅专栏

小工具、插件

14 篇文章

订阅专栏

效果图

在这里插入图片描述

实现代码

import MarkdownIt  from 'markdown-it'

const content = `
# 标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1
## 标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2标题2
### 标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3
#### 标题4标题4标题4标题4标题4标题4标题4标题4标题4标题4标题4标题4标题4
##### 标题5标题5标题5标题5标题5标题5标题5标题5标题5标题5标题5标题5标题5
###### 标题6标题6标题6标题6标题6标题6标题6标题6标题6标题6标题6标题6标题6

**加粗我是加粗文字加粗我是加粗文字加粗我是加粗文字加粗我是加粗文字加粗我是加粗文字加粗我是加粗文字加粗我是加粗文字加粗我是加粗文字加粗我是加粗文字加粗我是加粗文字加粗我是加粗文字加粗我是加粗文字**

1. 有序列表黑点
2. 有序列表黑点
3. 有序列表黑点

* 列表黑点
* 列表黑点
* 列表黑点

1. 有序列表1
2. 有序列表2
   1. 2.1
      1. 2.1.1

* 无序列表 - 一级
  * 无序列表 - 二级
    * 无序列表 - 三级
      * 无序列表 - 四级`
const md = new MarkdownIt()
const htmlContent = md.render(content)
this.$notify({
  title: '更新提示',
  dangerouslyUseHTMLString: true,
  message: htmlContent,
  position: 'bottom-right',
  duration: 0,
  customClass: 'update-notify' // 自定义类名
})