基于ByteMd实现掘金同款markdown预览

2,729 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 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入口进去

image-20230127160620583.png

也可以通过一下github地址进行访问

github.com/bytedance/b…

这里是官方文档

bytemd.js.org/

这里吐槽一下,文档里案例太少了。

安装

我们可以看到这里有四个版本,由于项目中采用的是Vue3来进行开发,所以我们选择@bytemd/vue-next

image-20230127161813633.png

// npm
$ npm install @bytemd/vue-next
​
// yarn 
$ yarn add @bytemd/vue-next
​
// pnpm
​
$ pnpm add @bytemd/vue-next

插件

Bytemd目前有多种插件提供来增强和美化我们的markdown

image-20230127162218498.png

不用多说,想要还原掘金的效果,直接全部安装

使用方式

引入所需插件

这里使用 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" />

这样就能得到掘金的同款效果了

例子

image-20230127171623239.png

结尾

ByteMd的官方文档主要是英文,阅读起来较为费劲,而且很多自定义配置并没有给出案例,但插件的整体实现功能做的还是比较完善的,期待掘金官方能把这款插件继续发展!下一期我们来实现如何实现目录定位。

参考

juejin.cn/post/712707…

juejin.cn/post/704965…

bytemd.js.org/#usage