vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式)

更新時間：2023年05月23日 10:00:08 作者：次頂級

這篇文章主要介紹了vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

單個文件使用可在組件內(nèi)單獨引用
批量導(dǎo)入多個文件
在 main.js 文件中引入剛剛創(chuàng)建的 index.js 文件，導(dǎo)出全部 me 組件，全局注冊
自定義代碼代碼塊高亮樣式（文件中自行修改顏色）
App.vue 可直接覆蓋（代碼塊背景色、代碼括號顏色）
組件中直接使，可以根據(jù) parameter 動態(tài)顯示 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.組件中使用時

單個文件使用可在組件內(nèi)單獨引用

main.js 中引入樣式

// markdown樣式
import "github-markdown-css";
// 代碼高亮
import "highlight.js/styles/github.css"; //默認樣式

vue 組件中使用
將 md 文件作為組件導(dǎo)入，注意：class 的值必須包含 markdown-body ，否則樣式無法生效！

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

批量導(dǎo)入多個文件

在 md 文件同目錄中創(chuàng)建 index.js 文件，導(dǎo)入 md 文件

// md文件批量引入
import javaScript_prototype from "./javaScript_prototype.md";
import git_basics from "./git_basics.md";
import click_copy from "./click_copy.md";
// 創(chuàng)建md組件同時設(shè)置文章其他信息，單獨導(dǎo)出使用
export const components = {
  click_copy: {
    id: 3,
    name: click_copy,
    type: ["html", "javaScript", "vue"],
    describe: "JavaScript頁面點擊復(fù)制功能(vue)",
    date: "2021-11-23 15:51:00",
  },
  git_basics: {
    id: 2,
    name: git_basics,
    type: ["git"],
    describe: "git 基礎(chǔ)使用（創(chuàng)建、推送、克隆、拉取、常用指令等）",
    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 文件中引入剛剛創(chuàng)建的 index.js 文件，導(dǎo)出全部 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);

自定義代碼代碼塊高亮樣式（文件中自行修改顏色）

創(chuàng)建 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;
}
/* 參數(shù) */
.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;
}
/* 函數(shù)顏色 */
.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>

組件中直接使，可以根據(jù) parameter 動態(tài)顯示 md 文件

將 md 文件作為組件導(dǎo)入，注意：class 的值必須包含 markdown-body ，否則樣式無法生效！
parameter 是文章 md 組件名稱，通過列表點擊傳遞 name，實現(xiàn)動態(tài)顯示 md 組件

<template>
    <div class="markdown-body">
        <!-- 文章詳情頁面 -->
        <div class="details">
            <!-- md文件組件 -->
            <component :is="parameter"></component>
        </div>
  </div>
</template>
export default {
  data() {
    return {
      parameter: "", //文章對應(yīng)組件名字
    };
  },
  mounted() {
    this.getParameters();
  },
  methods: {
    getParameters() {
      // 獲取文章參數(shù)  點擊跳轉(zhuǎn)獲取參數(shù)  或者 刷新頁面從url中獲取參數(shù)
      this.parameter =
        this.$route.query.article || location.search.split("=")[1];
    },
  },
};