首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue展示、读取.md 文件

vue中展示、读取.md 文件的方法(批量引入、自定义代码块高亮样式)

2023-05-23 09:57:41 作者：次顶级

这篇文章主要介绍了vue中展示、读取.md 文件的方法(批量引入、自定义代码块高亮样式),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1.首先安装以下依赖

vue-markdown-loader
vue-loader
vue-template-compiler
github-markdown-css
highlight.js

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

2.在 vue.config.js 文件中配置 webpack

module.exports = {
  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.组件中使用时

单个文件使用可在组件内单独引用

main.js 中引入样式

// markdown样式
import "github-markdown-css";
// 代码高亮
import "highlight.js/styles/github.css"; //默认样式

vue 组件中使用
将 md 文件作为组件导入，注意：class 的值必须包含 markdown-body ，否则样式无法生效！

<template>
  <demo-md class="markdown-body"></demo-md>
</template>
<script>
import DemoMd from './demo.md';
export default {
  components: {
    DemoMd
  }
}
</script>

批量导入多个文件

在 md 文件同目录中创建 index.js 文件，导入 md 文件

// md文件批量引入
import javaScript_prototype from "./javaScript_prototype.md";
import git_basics from "./git_basics.md";
import click_copy from "./click_copy.md";
// 创建md组件同时设置文章其他信息，单独导出使用
export const components = {
  click_copy: {
    id: 3,
    name: click_copy,
    type: ["html", "javaScript", "vue"],
    describe: "JavaScript页面点击复制功能(vue)",
    date: "2021-11-23 15:51:00",
  },
  git_basics: {
    id: 2,
    name: git_basics,
    type: ["git"],
    describe: "git 基础使用（创建、推送、克隆、拉取、常用指令等）",
    date: "2021-11-23 14:22:00",
  },
  javaScript_prototype: {
    id: 1,
    name: javaScript_prototype,
    type: ["javaScript"],
    describe: "个人对 javaScript 原型链理解",
    date: "2021-11-22 10:00:00",
  },
};
// 注册全部md组件
export const mdArticle = function (Vue, opts = {}) {
  Object.keys(components).forEach((key) => {
    Vue.component(key, components[key].name);
  });
};

在 main.js 文件中引入刚刚创建的 index.js 文件，导出全部 me 组件，全局注册

引入markdown样式和高亮样式

// markdown样式
import "github-markdown-css";
// 代码高亮
import "highlight.js/styles/github.css"; //默认样式
// 代码高亮devibeans   swh自定义颜色
// import './assets/css/swh.css'           //自定义样式
// 引入md文章组件列表
import { mdArticle } from "./article/index";
Vue.use(mdArticle);

自定义代码代码块高亮样式（文件中自行修改颜色）

创建 css 文件

/* 代码块高亮样式 */
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
code.hljs {
  padding: 3px 5px;
}
.hljs {
  color: #eaeaea;
  background: #000;
}
.hljs-subst {
  color: #eaeaea;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 700;
}
.hljs-type {
  color: #eaeaea;
}
/* 参数 */
.hljs-params {
  color: #ea00ff;
}
/* true颜色 */
.hljs-literal,
.hljs-name,
.hljs-number {
  color: rgb(105, 195, 255);
  font-weight: bolder;
}
/* 注释颜色 */
.hljs-comment {
  color: #8a8a8a;
}
.hljs-quote,
.hljs-selector-id {
  color: #0ff;
}
/* 函数颜色 */
.hljs-template-variable,
.hljs-title,
.hljs-variable {
  color: #c3bf7b;
  font-weight: 700;
}
/* 对象颜色 */
.hljs-keyword,
.hljs-selector-class,
.hljs-symbol {
  color: #9d6bb4;
}
/* 值的颜色 */
.hljs-bullet,
.hljs-string {
  color: rgb(255, 142, 66);
}
.hljs-section,
.hljs-tag {
  color: rgb(105, 195, 255);
}
.hljs-selector-tag {
  color: #000fff;
  font-weight: 700;
}
.hljs-attribute,
.hljs-built_in,
.hljs-link,
.hljs-regexp {
  color: rgb(105, 195, 255);
}
.hljs-meta {
  color: #fff;
  font-weight: bolder;
}

App.vue 可直接覆盖（代码块背景色、代码括号颜色）

<style lang="less">
#app {
  font-family: "楷体";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  .markdown-body .highlight pre,
  .markdown-body pre {
    background-color: rgb(34, 34, 34); // 代码块背景色改变默认
    color: rgb(105, 195, 255); //代码括号颜色
  }
}
</style>

组件中直接使，可以根据 parameter 动态显示 md 文件

将 md 文件作为组件导入，注意：class 的值必须包含 markdown-body ，否则样式无法生效！
parameter 是文章 md 组件名称，通过列表点击传递 name，实现动态显示 md 组件

<template>
    <div class="markdown-body">
        <!-- 文章详情页面 -->
        <div class="details">
            <!-- md文件组件 -->
            <component :is="parameter"></component>
        </div>
  </div>
</template>
export default {
  data() {
    return {
      parameter: "", //文章对应组件名字
    };
  },
  mounted() {
    this.getParameters();
  },
  methods: {
    getParameters() {
      // 获取文章参数  点击跳转获取参数  或者 刷新页面从url中获取参数
      this.parameter =
        this.$route.query.article || location.search.split("=")[1];
    },
  },
};

效果展示

点击 md 文件列表

Alt md

进入md 文件详情页面