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

【vue】vue2.x项目中使用md文件

一、Vue项目展示md文件的三种方式

1、将md文件 导入为 html

生成的标题标签自带具有id属性,值为标题内容;
<h2 id="测试">测试</h2>

# 处理md为html字符串
yarn add markdown-loader
# 处理字符串,用于导出显示
yarn add html-loader
module.exports = defineConfig({
...chainWebpack: (config) => {config.module.rule('md').test(/\.md$/).use('html-loader').loader('html-loader').end().use('markdown-loader').loader('markdown-loader').end()},
})

2、将md文件 导入为 vue组件(用于简单展示md可行)

转换后:生成新的html标签包住,没有id属性,不好进行其他操作;
<h2 >测试</h2>

yarn add vue-markdown-loader
   config.module.rule('md').test(/\.md$/).use('vue-loader').loader('vue-loader').end().use('vue-markdown-loader').loader('vue-markdown-loader/lib/markdown-compiler').options({raw: true,})

3、输出md原始语法,使用 markdown-it-vue 插件展示

markdown-it-vue 是一个丰富的 markdown Vue 组件,自带了很多功能

# 用于直接展示md语法
yarn add markdown-it-vue
# 处理html字符串为js
yarn add html-loader
    config.module.rule('md').test(/\.md$/).use('html-loader').loader('html-loader').end()
<MarkdownItVue :content="mdHtml"></MarkdownItVue>
---
import a from './a.md'
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'created() {this.mdHtml = a},

样式说明

使用不同样式风格,可引入相关插件

# 样式
yarn add github-markdown-css
import 'github-markdown-css'

代码高亮

highlight.js

对于使用vue-markdown-loader,直接入口文件引入即可

yarn add highlight.js
# 风格按需选择,这里使用github.css
import 'highlight.js/styles/github.css'

对于使用markdown-loader,代码高亮需要额外配置,以下两种方式都可以

import hljs from 'highlight.js'
// 方式一:指令v-highlight
Vue.directive('highlight', function (el) {hljs.configure({ useBR: true })let blocks = el.querySelectorAll('pre code')blocks.forEach((block) => {hljs.highlightBlock(block)})
})
// 使用
// <div class="markdown-body" v-html="mdHtml" v-highlight></div>
// 方式二:全局配置
Vue.prototype.$hljs = hljs
// 使用
<div class="markdown-body" v-html="mdHtml"></div>
---mounted() {this.$hljs.highlightAll()},

推荐代码高亮工具:prismjs、babel-plugin-prismjs

<div class="markdown-body line-numbers" v-html="mdHtml"></div>mounted() {this.$prism.highlightAll()},
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],// 配置md代码高亮插件plugins: [['prismjs',{languages: ['html','css','js','php','dart','bash','java','nginx','python',],plugins: ['line-numbers', 'show-language', 'copy-to-clipboard'],theme: 'tomorrow',css: true,},],],
}

二、补充:

marked 插件

markdown-loader即封装了它;

作用:将md语法的字符串转为html标签字符串;

yarn add marked
// 使用
<div v-html="mdHtml"></div>
---
let mdHtml = marked('## hello')

markdown-it-vue 插件

用于将html展示成md风格;
常与 方式1生成的html配套使用;

yarn add markdown-it-vue

三、扩展

  • Markdown 编辑器-mavonEditor
  • 富文本编辑器解析-vue-quill-editor

相关文章:

【vue】vue2.x项目中使用md文件

一、Vue项目展示md文件的三种方式 1、将md文件 导入为 html 生成的标题标签自带具有id属性&#xff0c;值为标题内容&#xff1b; <h2 id"测试">测试</h2> # 处理md为html字符串 yarn add markdown-loader # 处理字符串&#xff0c;用于导出显示 yarn a…...

操作系统权限提升(十三)之绕过UAC提权-MSF和CS绕过UAC提权

系列文章 操作系统权限提升(十二)之绕过UAC提权-Windows UAC概述 注&#xff1a;阅读本编文章前&#xff0c;请先阅读系列文章&#xff0c;以免造成看不懂的情况&#xff01;&#xff01; MSF和CS绕过UAC提权 CS绕过UAC提权 拿到一个普通管理员的SHELL,在CS中没有*号代表有…...

快速排序+快速定位

快速排序算法采用了分治法以及递归作为解决问题的思想。在计算机科学中&#xff0c;分治法是一种很重要的算法。字面上的解释是“分而治之”&#xff0c;就是把一个复杂的问题分成两个或更多的相同或相似的子问题&#xff0c;再把子问题分成更小的子问题……直到最后子问题可以…...

nginx http rewrite module 详解

大家好&#xff0c;我是 17。 今天和大家聊聊 nginx http rewrite module 。 简单来说&#xff0c; ngx_http_rewrite_module module 用正则匹配请求&#xff0c;改写请求&#xff0c;然后做跳转。可以是内部跳转&#xff0c;也可以是外部跳转。 学习这个模块的时候&#xf…...

机器学习可解释性一(LIME)

随着深度学习的发展&#xff0c;越来越多的模型诞生&#xff0c;并且在训练集和测试集上的表现甚至于高于人类&#xff0c;但是深度学习一直被认为是一个黑盒模型&#xff0c;我们通俗的认为&#xff0c;经过训练后&#xff0c;机器学习到了数据中的特征&#xff0c;进而可以正…...

CV学习笔记-MobileNet

MobileNet 文章目录MobileNet1. MobileNet概述2. 深度可分离卷积&#xff08;depthwise separable convolution&#xff09;2.1 深度可分离卷积通俗理解2.2 深度可分离卷积对于参数的优化3. MobileNet网络结构4. 代码实现4.1 卷积块4.2 深度可分离卷积块4.3 MobileNet定义4.4 完…...

C++进阶——继承

C进阶——继承 1.继承的概念及定义 面向对象三大特性&#xff1a;封装、继承、多态。 概念&#xff1a; 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特 性的基础上进行扩展&#xff0c;增加功能&#xff0c;这…...

数据结构---单链表

专栏&#xff1a;数据结构 个人主页&#xff1a;HaiFan. 专栏简介&#xff1a;从零开始&#xff0c;数据结构&#xff01;&#xff01; 单链表前言顺序表的缺陷链表的概念以及结构链表接口实现打印链表中的元素SLTPrintphead->next!NULL和phead!NULL的区别开辟空间SLTNewNod…...

redis数据结构的底层实现

文章目录一.引言二.redis的特点三.Redis的数据结构a.字符串b.hashc.listd.sete.zset(有序集合)一.引言 redis是一个开源的使用C语言编写、支持网络、可基于内存亦可持久化的日志型、key-value的NoSQL数据库。 通常使用redis作为缓存中间件来降低数据库的压力&#xff0c;除此…...

【JavaSE】复习(进阶)

文章目录1.final关键字2.常量3.抽象类3.1概括3.2 抽象方法4. 接口4.1 接口在开发中的作用4.2类型和类型之间的关系4.3抽象类和接口的区别5.包机制和import5.1 包机制5.2 import6.访问控制权限7.Object7.1 toString()7.2 equals()7.3 String类重写了toString和equals8.内部类8.1…...

Java 主流日志工具库

日志系统 java.util.logging (JUL) JDK1.4 开始&#xff0c;通过 java.util.logging 提供日志功能。虽然是官方自带的log lib&#xff0c;JUL的使用确不广泛。 JUL从JDK1.4 才开始加入(2002年)&#xff0c;当时各种第三方log lib已经被广泛使用了JUL早期存在性能问题&#x…...

产品经理有必要考个 PMP吗?(含PMP资料)

现在基本上做产品的都有一个PMP证件&#xff0c;从结果导向来说&#xff0c;不对口不会有这么大范围的人来考&#xff0c;但是需要因地制宜&#xff0c;在公司内部里&#xff0c;标准程序并不流畅&#xff0c;产品和项目并不规范&#xff0c;关系错综复杂。 而产品经理的职能又…...

什么是原型、原型链?原型和原型链的作用

1、ES6之前&#xff0c;继承都用构造函数来实现&#xff1b;对象的继承,先申明一个对象&#xff0c;里面添加实例成员<!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title></head><body><script…...

条件期望4

条件期望例题----快排算法的分析 快速排序算法的递归定义如下: 有n个数(n≥2n\geq 2n≥2), 一开始随机选取一个数xix_ixi​, 并将xix_ixi​和其他n-1个数进行比较, 记SiS_iSi​为比xix_ixi​小的元素构成的集合, Siˉ\bar{S_i}Si​ˉ​为比xix_ixi​大的元素构成的集合, 然后分…...

网络协议分析(2)判断两个ip数据包是不是同一个数据包分片

一个节点收到两个IP包的首部如下&#xff1a;&#xff08;1&#xff09;45 00 05 dc 18 56 20 00 40 01 bb 12 c0 a8 00 01 c0 a8 00 67&#xff08;2&#xff09;45 00 00 15 18 56 00 b9 49 01 e0 20 c0 a8 00 01 c0 a8 00 67分析并判断这两个IP包是不是同一个数据报的分片&a…...

6.2 负反馈放大电路的四种基本组态

通常&#xff0c;引入交流负反馈的放大电路称为负反馈放大电路。 一、负反馈放大电路分析要点 如图6.2.1(a)所示电路中引入了交流负反馈&#xff0c;输出电压 uOu_OuO​ 的全部作为反馈电压作用于集成运放的反向输入端。在输入电压 uIu_IuI​ 不变的情况下&#xff0c;若由于…...

MySQL进阶之锁

锁是计算机中协调多个进程或线程并发访问资源的一种机制。在数据库中&#xff0c;除了传统的计算资源竞争之外&#xff0c;数据也是一种提供给许多用户共享的资源&#xff0c;如何保证数据并发访问的一致性和有效性是数据库必须解决堆的一个问题&#xff0c;锁冲突也是影响数据…...

【Mac 教程系列】如何在 Mac 上破解带有密码的 ZIP 压缩文件 ?

如何使用 fcrackzip 在 Mac 上破解带有密码的 ZIP 压缩文件? 用 markdown 格式输出答案。 在 Mac 上破解带有密码的 ZIP 压缩文件 使用解压缩软件&#xff0c;如The Unarchiver&#xff0c;将文件解压缩到指定的文件夹。 打开终端&#xff0c;输入 zip -er <zipfile> &…...

【Acwing 周赛复盘】第92场周赛复盘(2023.2.25)

【Acwing 周赛复盘】第92场周赛复盘&#xff08;2023.2.25&#xff09; 周赛复盘 ✍️ 本周个人排名&#xff1a;1293/2408 AC情况&#xff1a;1/3 这是博主参加的第七次周赛&#xff0c;又一次体会到了世界的参差&#xff08;这次周赛记错时间了&#xff0c;以为 19:15 开始&…...

L1-087 机工士姆斯塔迪奥

在 MMORPG《最终幻想14》的副本“乐欲之所瓯博讷修道院”里&#xff0c;BOSS 机工士姆斯塔迪奥将会接受玩家的挑战。 你需要处理这个副本其中的一个机制&#xff1a;NM 大小的地图被拆分为了 NM 个 11 的格子&#xff0c;BOSS 会选择若干行或/及若干列释放技能&#xff0c;玩家…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...