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

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

也能够通过一下github地址进行拜访

github.com/bytedance/b…

这儿是官方文档

bytemd.js.org/

这儿吐槽一下，文档里事例太少了。

安装

咱们能够看到这儿有四个版本，由于项目中采用的是Vue3来进行开发，所以咱们选择@bytemd/vue-next

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

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

插件

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

基于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实现掘金同款markdown预览

结束

ByteMd的官方文档首要是英文，阅览起来较为费劲，并且很多自界说装备并没有给出事例，但插件的整体完成功能做的还是比较完善的，等待官方能把这款插件继续发展！下一期咱们来完成如何完成目录定位。

参考

/post/712707…

/post/704965…

bytemd.js.org/#usage