这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
“ 推荐字节开源的Markdown编辑器ByteMD，轻松拥有掘金同款编辑器 ”
ByteMd使用
ByteMD is a Markdown editor component built with Svelte. It could also be used in other libraries/frameworks such as React, Vue and Angular.
ByteMD编辑器可以从掘金的创作后台创建文章右边的Github入口进去
也可以通过一下github地址进行访问
这里是官方文档
这里吐槽一下，文档里案例太少了。
安装
我们可以看到这里有四个版本，由于项目中采用的是Vue3来进行开发，所以我们选择@bytemd/vue-next
// npm
$ npm install @bytemd/vue-next
// yarn
$ yarn add @bytemd/vue-next
// pnpm
$ pnpm add @bytemd/vue-next
插件
Bytemd目前有多种插件提供来增强和美化我们的markdown
不用多说，想要还原掘金的效果，直接全部安装
使用方式
引入所需插件
这里使用 import 引入
import breaks from '@bytemd/plugin-breaks'
import gemoji from '@bytemd/plugin-gemoji'
import gfm from '@bytemd/plugin-gfm'
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 frontmatter from '@bytemd/plugin-frontmatter'
import themeStyle from './themeStyle'
import highlightStyle from './highlightStyle'
定义插件
这里主要动态引入了主题样式，这样就可以根据 front matter 格式的元信息来动态引入样式了
const plugins = [ breaks(), frontmatter(), { viewerEffect({ file }: any) { if (typeof file.value != 'object') return const $style = document.createElement('style') try { $style.innerHTML = themes[file.value.frontmatter.theme]?.style ?? themes.juejin.style
}
catch (e) {
$style.innerHTML = themes.juejin.style
}
document.querySelector('.markdown-body')?.appendChild($style)
return () => {
$style.remove()
}
},
},
gemoji(),
gfm(),
highlight(),
math(),
medium(),
mermaid(),
]
在Viewer中使用
:value表示是数据来源，主要是markdown字符串
<Viewer id="markdown-body" :value="articleHtmlContent" :plugins="plugins" />
这样就能得到掘金的同款效果了
例子
结尾
ByteMd的官方文档主要是英文，阅读起来较为费劲，而且很多自定义配置并没有给出案例，但插件的整体实现功能做的还是比较完善的，期待掘金官方能把这款插件继续发展！下一期我们来实现如何实现目录定位。
