vue 加载展示md文件(markdown语法 .md后缀的文件)

简介: vue 加载展示md文件(markdown语法 .md后缀的文件)

1. 安装依赖包

npm i vue-markdown-loader -D
npm i  vue-loader vue-template-compiler -D
npm i github-markdown-css -D
npm i highlight.js -D

若报错 Vue packages version mismatch,则安装与 vue-template-compiler 版本一致的vue即可

npm install vue@2.6.12 --save

2. 在vue.config.js中添加配置

   chainWebpack: config => {
        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. 导入样式

在 .vue 文件中局部导入,或在 main.js 中全局导入

    import 'github-markdown-css'
    import 'highlight.js/styles/github.css'

4. 导入md文件

import Swagger from './md/Swagger.md'

5. 注册为组件

components: {
    Swagger
},

6. 在页面中使用

此处 class的值必须包含 markdown-body ,否则样式无法生效!

<Swagger class="markdown-body"/>

最终效果

目录
相关文章
文本,vitepress两栏怎样设置,应用场景是每个导航都是单独的markdown文件
文本,vitepress两栏怎样设置,应用场景是每个导航都是单独的markdown文件
揭秘Markdown:轻松掌握基础语法,让你的写作更高效、优雅!
揭秘Markdown:轻松掌握基础语法,让你的写作更高效、优雅!
|
22天前
markdown语法
学习Markdown基本语法:标题、段落、强调、列表、代码块等,轻松撰写整洁文档。[查看教程](https://markdown.com.cn/basic-syntax/)
14 0
|
2月前
Markdown基础语法详细版
Markdown基础语法详细版
|
2月前
|
弹性计算 运维 Shell
自动生成带有随机内容的Markdown文件
【4月更文挑战第30天】
24 0
|
2月前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
110 1
|
2月前
《使用「Markdown」编辑器的那些天 |CSDN编辑器测评》
《使用「Markdown」编辑器的那些天 |CSDN编辑器测评》
34 0
|
2月前
|
机器学习/深度学习 uml
Markdown编辑器用法保存自用
Markdown编辑器用法保存自用
|
2月前
|
Linux Docker 容器
Linux本地搭建StackEdit Markdown编辑器结合内网穿透实现远程访问
Linux本地搭建StackEdit Markdown编辑器结合内网穿透实现远程访问
51 0
|
1月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
60 4