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

展示和读取 markdown 文件在 Vue 中是一个常见的需求，Vue 框架提供了一些库和插件来满足这种需求。以下是在 Vue 中展示、读取 markdown 文件的方法以及如何实现自定义代码块高亮样式的完整攻略：

读取 Markdown 文件

在 Vue 中读取 Markdown 文件可以使用 markdown-it 库。该库可以将 Markdown 文件转换为 HTML。

1. 安装 markdown-it 和 markdown-it-container 库。

npm install markdown-it markdown-it-container --save

1. 在 Vue 中引入并使用 markdown-it。

import MarkdownIt from "markdown-it";
import Container from "markdown-it-container";

export default {
  data() {
    return {
      markdownContent: "",
    };
  },
  mounted() {
    const md = new MarkdownIt();
    const markdownFile = "path-to-file.md"; //要读取的 markdown 文件路径
    fetch(markdownFile)
      .then((res) => res.text())
      .then((data) => {
        this.markdownContent = md.render(data);
      });
  },
};

1. 在 Vue component 中使用 v-html 属性来渲染 markdown 内容。

<template>
  <div v-html="markdownContent" />
</template>

自定义代码块高亮样式

在 Vue 中实现自定义代码块高亮样式需要使用 markdown-it-highlightjs 库。该库可以将代码块高亮化。

1. 安装 markdown-it-highlightjs 和 highlight.js 库。

npm install markdown-it-highlightjs highlight.js --save

1. 在 Vue 中引入并使用 markdown-it-highlightjs。

import MarkdownIt from "markdown-it";
import hljs from "highlight.js";
import markdownItHighlightjs from "markdown-it-highlightjs";

export default {
  data() {
    return {
      markdownContent: "",
    };
  },
  mounted() {
    const md = new MarkdownIt();
    md.use(markdownItHighlightjs, {
      hljs,
      // 可以在 options 中添加自定义样式
      // see: https://highlightjs.org/static/demo/
      code: {
        class: "hljs",
      },
    });

    const markdownFile = "path-to-file.md"; //要读取的 markdown 文件路径
    fetch(markdownFile)
      .then((res) => res.text())
      .then((data) => {
        this.markdownContent = md.render(data);
      });
  },
};

1. 在 Vue component 中使用 v-html 属性来渲染 markdown 内容。

<template>
  <div v-html="markdownContent" />
</template>

示例：

假设我们有一个 Markdown 文件 example.md，里面的内容如下：

# Hello World

这是一段代码：

```javascript
const add = (a, b) => {
  return a + b;
};

我们可以按照以下步骤在 Vue 中展示和读取该 Markdown 文件：

```js
<template>
  <div v-html="markdownContent" />
</template>

<script>
import MarkdownIt from "markdown-it";
import hljs from "highlight.js";
import markdownItHighlightjs from "markdown-it-highlightjs";

export default {
  data() {
    return {
      markdownContent: "",
    };
  },
  mounted() {
    const md = new MarkdownIt();
    md.use(markdownItHighlightjs, {
      hljs,
      // 可以在 options 中添加自定义样式
      // see: https://highlightjs.org/static/demo/
      code: {
        class: "hljs",
      },
    });

    const markdownFile = "example.md"; //要读取的 markdown 文件路径
    fetch(markdownFile)
      .then((res) => res.text())
      .then((data) => {
        this.markdownContent = md.render(data);
      });
  },
};
</script>

以上例子中，我们使用了 markdown-it-container 和 markdown-it-highlightjs 两个库来实现展示 markdown 和自定义代码块高亮样式的功能。可以根据自己的需求来对 markdown-it 进行自定义配置。