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

最新推荐文章于 2025-03-07 17:03:07 发布

青阳流月

最新推荐文章于 2025-03-07 17:03:07 发布

阅读量8.4k

点赞数 11

分类专栏： vue2 文章标签： vue.js 前端 javascript markdown

本文链接：https://blog.csdn.net/m0_54741495/article/details/139470619

版权

前言

其实有很多插件都是可以用来回显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:/