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

前言

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/23091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务开发与实战Day02 - Docker

一、Docker快速入门 快速构建、运行、管理应用的工具 安装部署教程&#xff1a;Docs 1. 部署MySQL 测试连接&#xff1a; 镜像和容器 当我们利用Docker安装应用时&#xff0c;Docker会自动搜索并下载应用镜像&#xff08;image&#xff09;。镜像不仅包含应用本身&#xff…

天润融通,荣获2024中国AI应用层创新企业

AI技术发展日新月异&#xff0c;可谓“AI一天&#xff0c;人间一年”。 从2023年到2024年&#xff0c;短短一年的时间&#xff0c;大模型技术的发展就已经逐步从追求“技术突破”转向了追求“应用落地”。如何将大模型的技术与企业的生产、运营、销售等场景结合起来&#xff0…

java版CRM客户关系管理系统源码:CRM客户关系管理系统的功能详解

CRM客户关系管理系统是一款功能全面的客户管理工具&#xff0c;旨在帮助企业和销售团队提高客户管理效率&#xff0c;优化销售流程。该系统包含多个模块&#xff0c;覆盖了从线索到回款的全流程管理&#xff0c;为用户提供了一个集成化的客户关系管理平台。 一、待办事项模块&a…

Docker 部署 Redis Cluster 高性能高可用分片集群

文章目录 1、环境准备2、Cluster 集群讲解2.1、Cluster 介绍2.2、Cluster 和哨兵模式区别2.3、Cluster 如何分散存储数据 3、Cluster 搭建流程3.1、安装 Docker3.2、启动 Redis 容器3.3、创建 Cluster 集群 4、Cluster 集群测试4.1、读写操作4.2、故障转移 1、环境准备 准备6台…

基于Keil5移植LVGL,懂得原理之后什么开发板都可以移植

今天我们来移植一下LVGL&#xff0c;其实LVGL和Qt差不多&#xff0c;操作起来都很简单&#xff0c;看着官方文档都可以自己学习使用。 难就难在移植上面&#xff0c;移植个LVGL花了我三天才弄明白&#xff08;虽然最后发现在一个很弱智的问题上耽误了我两天&#xff09;&#…

oracle 打补丁遇到 check “CheckActiveFilesAndExecutables“ failed报错处理方法

该报错是因为打补丁的时候停止集群没有停止干净进程导致的 问题 处理方法 强制停止打补丁所在节点集群服务 查看grid和oracle相关进程是否停止干净&#xff0c;发现有未关闭的进程手动kill 处理完毕继续打补丁即可

跟着大佬学RE(四)

几个API函数 [ACTF新生赛2020]Universe_final_answer 一个很多方程组的函数&#xff0c;还有一个嗯&#xff0c;对input进行一些操作的函数 嗯&#xff0c;确实方程解出来得到 key 直接运行就可以得到 flag 了&#xff0c;不过还是去分析了一下。 v22 __readfsqword(0x28u);…

【深度学习】安全帽检测,目标检测,Faster RCNN训练

文章目录 资料环境尝试训练安全帽数据训练测试预测全部数据、代码、训练完的权重等资料见&#xff1a; 资料 依据这个进行训练&#xff1a; https://github.com/WZMIAOMIAO/deep-learning-for-image-processing/tree/master/pytorch_object_detection/faster_rcnn ├── bac…

nt9856_sensor_driver camera i2c无响应

前言 最新更换了不同的平台进行开发&#xff0c;所以一心在研究和学习中&#xff0c;没有太多的时间发布文章&#xff0c;最近开开始上手了&#xff0c;抽空把之前的工作记录进行总结和发布。从原来的高通和瑞芯微转到了国科和海思联咏&#xff0c;整体的架构不太一致&#xff…

【JVM】已验鼎真,鉴定为:妈妈加载的(双亲委派模型)

【JVM】已验鼎真&#xff0c;鉴定为&#xff1a;妈妈加载的&#xff08;双亲委派模型&#xff09; 在Java的世界中&#xff0c;类加载器&#xff08;ClassLoader&#xff09;是Java虚拟机&#xff08;JVM&#xff09;用来动态加载类的基础组件。双亲委派模型&#xff08;Paren…

安装和使用conda

Conda 是一个开源的软件包管理系统和环境管理系统&#xff0c;用于安装多个版本的软件包及其依赖关系&#xff0c;并在它们之间轻松切换。可以创建多个环境&#xff0c;并在环境中使用不同的python版本&#xff0c;并安装环境专属的python依赖包&#xff0c;可以用来避免python…

MySQL中:cmd下输入命令mysql -uroot -p 连接数据库错误

目录 问题cmd下输入命令mysql -uroot -p错误 待续、更新中 问题 cmd下输入命令mysql -uroot -p错误 解决 配置环境变量&#xff1a;高级系统设置——环境变量——系统变量——path编辑——新建——MySQL.exe文件路径&#xff08;如下图所示&#xff09; phpstudy2018软件下&am…

王学岗鸿蒙开发(北向)——————(二)TS基本语法详解

1&#xff0c;Ts(TypeScript)语法相当于JAVAScript类型&#xff0c;鸿蒙arkTs是基于TS语言的,当然artTs也融合了其它的语言。 2&#xff0c;本篇文章是基于n9版本。注意,有些语法是已经不能用的。 3&#xff0c; 4&#xff0c;变量:用来存储数据,数字字母组成&#xff0c;数字不…

泛微开发修炼之旅--07通过后端代码实现创建并发送待办、源码及示例

文章链接&#xff1a;泛微开发修炼之旅--07通过后端代码实现创建并发送待办、源码及示例

解决找不到api-ms-win-crt-runtime-l1-1-0.dll问题的5种方法

电脑已经成为我们生活和工作中不可或缺的工具&#xff0c;然而&#xff0c;由于各种原因&#xff0c;我们可能会遇到一些常见的问题&#xff0c;其中之一就是电脑缺失api-ms-win-crt-runtime-l1-1-0.dll文件。这个问题可能会导致电脑出现错误提示、程序无法正常运行等困扰。为了…

[Redis]Zset类型

Zset有序集合相对于字符串、列表、哈希、集合来说会有一些陌生。 它保留了集合不能有重复成员的特点&#xff0c;但与集合不同的是&#xff0c;有序集合中的每个元素都有一个唯一的浮点类型的分数&#xff08;score&#xff09;与之关联&#xff0c;着使得有序集合中的元素是可…

Python04:python代码设置作者/创建时间/文件名称

我们新建一个py文件时&#xff0c;如果希望文件开头有固定的内容&#xff0c;怎么设置呢&#xff1f; 比如代码作者、文件创建时间等。。。 1、点击左上角【Python】–>【Settings】设置 2、在弹出的新窗口找到【File and Code Templates】–>【Python Script】–>在右…

6_5 test

Lucene 存储引擎 https://www.cnblogs.com/tech-lee/p/15225276.html\ 规范 问问题的技巧 提问者&#xff1a;要实现怎样的目标&#xff1f;自己计划是如何实现这个目标的&#xff1f;问题出现在哪个环节&#xff1f;自己为了解决这个问题&#xff0c;已经做了哪些尝试和工…

【ubuntu软件版本管理】利用update-alternatives管理ubuntu软件

​ 我们有的时候希望在安装了新软件之后保留旧版本的软件&#xff0c;比如希望保留旧版本的gcc&#xff0c;以防以前写的C编译出问题&#xff0c;这时候就需要版本管理软件update-alternatives。 ​ 在此之前我们需要先弄清楚&#xff0c;什么是ubuntu的软件&#xff1f;拿C源…

推荐系统学习 一

参考&#xff1a;一文看懂推荐系统&#xff1a;召回08&#xff1a;双塔模型——线上服务需要离线存物品向量、模型更新分为全量更新和增量更新_数据库全量更新和增量更新流程图-CSDN博客 一文看懂推荐系统&#xff1a;概要01&#xff1a;推荐系统的基本概念_王树森 小红书-CSD…