Vue 中使用 markdown 和加载.md 文件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 中使用 markdown 和加载.md 文件相关的知识,希望对你有一定的参考价值。

参考技术A

首先安装 marked 插件

要能够从外部导入.md 文件,我们还需要给项目安装两个 loader。

还需要做一步,在项目的根路径下创建 vue.config.js (假如没有的话)。

然后在 vue.config.js 文件中加入下面的配置

最后就能正常在组件中导入 helloMarked.md 文件

在 vue 3 中使用 markdown 编辑器

安装

# 使用 npm
npm i @kangc/v-md-editor@next -S

# 使用yarn
yarn add @kangc/v-md-editor@next

引入组件

import { creatApp } from \'vue\';
import VMdEditor from \'@kangc/v-md-editor\';
import \'@kangc/v-md-editor/lib/style/base-editor.css\';
import githubTheme from \'@kangc/v-md-editor/lib/theme/github.js\';
import \'@kangc/v-md-editor/lib/theme/style/github.css\';

VMdEditor.use(githubTheme);

const app = creatApp(/*...*/);

app.use(VMdEditor);

基础用法

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
import { ref } from \'vue\';

export default {
    setup () {
        const text = ref(\'\');

        return {
            text
        }
    }
}
</script>

保存后的 markdown 文本如何渲染在页面上?

如果你的项目中引入了编辑器。你可以直接使用编辑器的预览模式来渲染。例如:

  1. 渲染 markdown 文本

如果你的项目中引入了编辑器。你可以直接使用编辑器的预览模式来渲染。例如:

<template>
  <v-md-editor :value="markdown" mode="preview"></v-md-editor>
</template>

<script>
export default {
  data() {
    return {
      markdown: \'### 标题\',
    };
  },
};
</script>

如果你的项目不需要编辑功能,只需要渲染 markdown 你可以只引入 preview 组件来渲染。例如:

// main.js
import VMdPreview from \'@kangc/v-md-editor/lib/preview\';
import \'@kangc/v-md-editor/lib/style/preview.css\';
// 引入你所使用的主题 此处以 github 主题为例
import githubTheme from \'@kangc/v-md-editor/lib/theme/github\';
import \'@kangc/v-md-editor/lib/theme/style/github.css\';

VMdPreview.use(githubTheme);
Vue.use(VMdPreview);
<template>
  <v-md-preview :text="markdown"></v-md-preview>
</template>

<script>
export default {
  data() {
    return {
      markdown: \'### 标题\',
    };
  },
};
</script>
  1. 渲染 html 文本

如果你的项目不需要编辑功能,只需要渲染 html 你可以只引入 preview-html 组件来渲染。例如:

// main.js
import VMdPreviewHtml from \'@kangc/v-md-editor/lib/preview-html\';
import \'@kangc/v-md-editor/lib/style/preview-html.css\';

// 引入使用主题的样式
import \'@kangc/v-md-editor/lib/theme/style/vuepress\';

Vue.use(VMdPreviewHtml);
<template>
  <!-- preview-class 为主题的样式类名,例如vuepress就是vuepress-markdown-body -->
  <v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>
</template>

<script>
export default {
  data() {
    return {
      html: \'<div data-v-md-line="1"><h1 align="center">Markdown Editor built on Vue</h1>\',
    };
  },
};
</script>

更多高级用法参考官方文档:v-md-editor

以上是关于Vue 中使用 markdown 和加载.md 文件的主要内容,如果未能解决你的问题,请参考以下文章

基于VSCode的Markdown博文编写与发布方案

Vue3.0中读取本地Markdown文件的内容

如何在Markdown(README.md)中使用Github按钮

README.md文件 github Markdown语言详解 md文件用法和说明

vue项目解析markdown文件

rmarkdown怎么导入package