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

在vue项目中使用markdown-it回显markdown文本

news 来源：原创 2024/7/3 0:52:25

前言

其实有很多插件都是可以用来回显markdown文本的,这个插件也是其中之一。

文档地址:markdown-it | markdown-it 中文文档

这个文档在vue2和vue3里面都可以使用,所以还是比较推荐的

使用

安装

npm install markdown-it --save

应用

<template><div><p v-html="renderMdText(markDownText)" class="mdTextBox"></p></div>
</template><script>
import MarkdownIt from 'markdown-it'
import 'highlight.js/styles/default.css'
export default {
name:'markdownTest',
data(){return{//渲染的文本markDownText:"# 一号标题 \n\n  ## 二号标题 \n\n  ### 三号标题 \n\n 这是百度的链接 [https://www.baidu.com/](https://www.baidu.com/)\n\n ```javascript \n\n console.log('hello world') \n\n ```  \n\n 下面是一张图片 \n\n![风景图](https://img0.baidu.com/it/u=1090967238,1582698902&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500)",//初始化markdownRender:new MarkdownIt({html:true,linkify: true,typographer: true})}
},methods:{renderMdText(text){//生成htmlreturn this.markdownRender.render(text)}
}
}
</script><style lang="less" scoped>
.mdTextBox{width: 1400px;
}
</style>

效果

样式问题

虽然内容是显示出来了,但是我们必须注意样式问题

默认效果的清除

在很多项目初始化创建的时候,许多默认样式会被清除,其实就会导致markdown-it渲染的html文档样式的缺失

如图所示:标题,代码块,链接,文字行高等等应该有一些特定的样式和高亮,其实这都是因为一些项目把初始化的样式给去掉了,想要回显的比较好看一些,我们可以自己给定一些样式

添加样式

在vue中,切记用deep

vue2语法为 /deep/ 选择器 {样式}

vue3语法为 :deep(选择器) {样式}

.mdTextBox{width: 1400px;/deep/ h1{font-size: 24px;line-height: 48px;font-weight: 800;}/deep/ h2{font-size: 22px;line-height: 42px;font-weight: 700;}/deep/ h3{font-size: 20px;line-height: 36px;font-weight: 600;}/deep/ img{width: 500px;}/deep/ a{color: #335fee;line-height: 20px;}/deep/ p  {line-height: 20px;}
}

效果如下

其他样式

在markdown文档中,其实还会有其他重要格式的样式,比如table,ul,ol等等的,需要保持原有的默认样式,同样的方法,用deep这些样式恢复

插件

当然了,常规的文本虽然能回显出来,但是还是有很多特殊结构的文本,我们就可以用到一些插件,在官方文档中有具体的说明,我这里就不过多写了,直接展示案例,方便看客老爷们cv

代码

<template><div><p v-html="renderMdText(markDownText)" class="mdTextBox"></p></div>
</template><script>
import MarkdownIt from 'markdown-it'
import MarkdownItAbbr from 'markdown-it-abbr'
import MarkdownItAnchor from 'markdown-it-anchor'
import MarkdownItFootnote from 'markdown-it-footnote'
import MarkdownItHighlightjs from 'markdown-it-highlightjs'
import MarkdownItSub from 'markdown-it-sub'
import MarkdownItSup from 'markdown-it-sup'
import MarkdownItTasklists from 'markdown-it-task-lists'
import MarkdownItTOC from 'markdown-it-toc-done-right'
import 'highlight.js/styles/default.css'
export default {
name:'markdownTest',
data(){return{markDownText:"# 一号标题 \n\n  ## 二号标题 \n\n  ### 三号标题 \n\n 这是百度的链接 [https://www.baidu.com/](https://www.baidu.com/)\n\n ```javascript \n\n console.log('hello world') \n\n ```  \n\n 下面是一张图片 \n\n![风景图](https://img0.baidu.com/it/u=1090967238,1582698902&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500)",markdownRender:new MarkdownIt({html:true,linkify: true,typographer: true}).use(MarkdownItAbbr).use(MarkdownItAnchor).use(MarkdownItFootnote).use(MarkdownItHighlightjs).use(MarkdownItSub).use(MarkdownItSup).use(MarkdownItTasklists).use(MarkdownItTOC)}
},methods:{renderMdText(text){return this.markdownRender.render(text)}
}
}
</script><style lang="less" scoped>
.mdTextBox{width: 1400px;/deep/ h1{font-size: 24px;line-height: 48px;font-weight: 800;}/deep/ h2{font-size: 22px;line-height: 42px;font-weight: 700;}/deep/ h3{font-size: 20px;line-height: 36px;font-weight: 600;}/deep/ img{width: 500px;}/deep/ a{color: #335fee;line-height: 20px;}/deep/ p  {line-height: 20px;}
}
</style>