欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年05月23日 10:00:08   作者：次頂級  
這篇文章主要介紹了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 文件同目錄中創(chuàng)建 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";
// 創(chuàng)建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 基礎使用（創(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 文件，導出全部 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 文件作為組件導入，注意：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: "", //文章對應組件名字
    };
  },
  mounted() {
    this.getParameters();
  },
  methods: {
    getParameters() {
      // 獲取文章參數(shù)  點擊跳轉獲取參數(shù)  或者 刷新頁面從url中獲取參數(shù)
      this.parameter =
        this.$route.query.article || location.search.split("=")[1];
    },
  },
};

效果展示

點擊 md 文件列表

Alt md

 進入md 文件詳情頁面

Alt md

到此這篇關于vue中展示、讀取.md 文件的方法(批量引入、自定義代碼塊高亮樣式)的文章就介紹到這了,更多相關vue展示、讀取.md 文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論