基于Vue3、ByteMD打造掘金同款markdown编辑器（一）

基于Vue3、ByteMD打造掘金同款markdown编辑器（一）

安装ByteMD依赖

pnpm install bytemd

安装ByteMD的Vue3依赖@bytemd/vue-next

pnpm install @bytemd/vue-next

安装插件@bytemd/plugin-gfm

pnpm install @bytemd/plugin-gfm

插件作用：支持GFM（自动链接文字、删除线、表格、任务列表）

引入ByteMD样式

import 'bytemd/dist/index.css'

汉化ByteMD

import zhHans from 'bytemd/locales/zh_Hans.json

# data函数中声明
data() {
   
   
    return {
   
   
       zhHans
    }
}
# 绑定属性
<Editor :locale="zhHans" :value="value" :plugins="plugins" @change="handleChange" />

安装 @bytemd/plugin-gemoji

pnpm install @bytemd/plugin-gemoji

支持Gemoji短代码

安装@bytemd/plugin-highlight

pnpm install @bytemd/plugin-highlight

支持代码块高亮

安装 @bytemd/plugin-frontmatter

pnpm install @bytemd/plugin-frontmatter

解析前题（啥意思？）

安装 @bytemd/plugin-medium-zoom

pnpm install