【Vue】解析渲染markdown文件

最新推荐文章于 2024-08-16 07:41:15 发布

望天边星宿

最新推荐文章于 2024-08-16 07:41:15 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.csdn.net/see_star/article/details/125487803

版权

前端同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

1 安装依赖

npm i vue-markdown-loader -s
npm i vue-loader vue-template-compiler -s

npm i github-markdown-css -s
npm i highlight.js -s

2 配置vue.config.js

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 使用

<template>
  <!-- class markdown-body 必须加，否则标签样式会出现问题 -->
  <div class="markdown-body">
    <markdown />
  </div>
</template>

<script>
// 引入 markdown 文件，引入后是一个组件，需要在 components 中注册
import markdown from 'xxxx.md'
// 代码高亮
import 'highlight.js/styles/github.css'
// 其他元素使用 github 的样式
import 'github-markdown-css'
export default {
  components: {
    markdown
  },
}
</script>