<style>
import { Editor, Viewer } from '@bytemd/vue-next'
import 'bytemd/dist/index.css'
import breaks from '@bytemd/plugin-breaks'
import frontmatter from '@bytemd/plugin-frontmatter'
import gemoji from '@bytemd/plugin-gemoji'
import gfm from '@bytemd/plugin-gfm'
import footnotes from '@bytemd/plugin-footnotes'
import highlight from '@bytemd/plugin-highlight'
import math from '@bytemd/plugin-math-ssr'
import medium from '@bytemd/plugin-medium-zoom'
import mermaid from '@bytemd/plugin-mermaid'
import 'juejin-markdown-themes/dist/juejin.min.css'
import zhHans from 'bytemd/locales/zh_Hans.json'
import 'highlight.js/styles/vs.css'

const plugins = ref([
    breaks(),
    frontmatter(),
    gemoji(),
    gfm(),
    highlight(),
    math(),
    medium(),
    mermaid(),
    footnotes(),
])
const value = ref('')
const components = [
    Viewer, Editor
]
const handleChange = (v) => {
    value.value = v
}
</style>
<template>
<Editor class="editos" :value="value" :plugins="plugins" :locale="zhHans" @change="handleChange"
            :uploadImages="uploadImage" />
        <Viewer :value="value" :plugins="plugins" :locale="zhHans" />
</template>

![2024-05-04T17:04:02.png][1]