Vue 使用markdown-loader解析引入的 .md 文件

目录
文章目录隐藏
  1. 前言
  2. 需求
  3. 安装 html-loader 与 markdown-loader
  4. 配置 md 文件解析规则
  5. 使用方法
  6. 结语

前言

刚接到这个需求的时候,在项目中引入 .md 文件,需要对 markdown 语法进行解析,觉得很简单(的确很简单)但是这玩意的坑真的也让人很无奈。

网上找了很多的资料,要么就是有头没有尾,介绍的不是很详细,都没有写出痛点(这就很难过了)。本人通过实践并且在我们项目中平稳运行,想分享给后面的人,为大家排忧解难,哈哈。

需求

vue 项目中可以良好展示 markdown(只是展示功能 没有编辑功能)

安装 html-loader 与 markdown-loader

安装 html-loader 与 markdown-loader

npm i html-loader markdown-loader --save

这里注意了!html-loader 的版本号不能太新,不然是要报错的。

配置 md 文件解析规则

package.json 同级的目录下找到 vue.config.js,没有则新建一个,配置加载 md 文件的规则,如下:

module.exports = {
  //配置加载 md 文件时的解析规则
   chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
}

如果大家嫌样式丑陋,可以安装 github-markdown-css

npm install github-markdown-css
import 'github-markdown-css'; //哪里用 markdown 就在哪里引用 可以放在 main.js

使用方法

<template>
  <div>
    <div class="markdown-body" v-html="md">
    <!-- markdown-body 一定要写这个 class 名 -->
    </div>
  </div>
</template>
 
<script>
import demo from "@/assets/demo.md";
 
console.log(demo)
 
export default {
  data() {
    return {
      md:demo
    };
  }
};
</script>
 
<style lang="less" scoped>
// 这里可以约束解析出来后的 markdown 标签样式,如设置 h3{...}
</style>

最终效果 打码勿怪

最终效果

结语

以上就是 vue 导入.md 文件使用 markdown-loader 解析 markdown 语法的详细内容,希望对大家有用。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue 使用markdown-loader解析引入的 .md 文件

发表回复