vue3中预览markdown

为什么要用markdown？

通常技术人员写博客的时候，都会用到markdown来分享自己的技术。对我们技术人员来说，真的是必不可缺的工具。

vue3中markdown工具都有哪些？

  1. v-md-editor
  2. vue3-markdown-it
  3. md-editor-v3
  4. @bytemd/vue-next

最终选择

@bytemd/vue-next 通过不断的尝试，最终还是选择了它。字节旗下的，掘金同款。ssr支持兼容我用的框架。基本满足需求

安装

 bash
yarn add @bytemd/plugin-gfm // 自动链接文字、删除线、表格、任务列表
yarn add @bytemd/plugin-highlight-ssr // 高亮（支持ssr） 根据项目需求安装
yarn add @bytemd/plugin-highligh // 高亮（不支持ssr）根据项目需求安装
yarn add @bytemd/plugin-gemoji  // gemoji
yarn add @bytemd/vue-next // vue3必备

用法

 vue
<template>
  <Viewer :value="value" :plugins="plugins"  />
</template>
<script lang="ts" setup>
import "bytemd/dist/index.css";
import { Viewer } from "@bytemd/vue-next"; // 根据需求选择编辑还是预览
import gfm from "@bytemd/plugin-gfm";
import highlightSsr from "@bytemd/plugin-highlight-ssr";
import highlight from "@bytemd/plugin-highlight";
import gemoji from "@bytemd/plugin-gemoji";
import "github-markdown-css";
import "highlight.js/styles/github.css";
const plugins = [gfm(), highlightSsr(), gemoji()];
</script>