高仿掘金编辑器，支持主题切换。

因为自己的小项目需要找了很多Markdown编辑器实现，兜兜转转发现掘金的编辑器简单就挺好用，所以就采用了掘金使用的开源Markdown编辑器bytemd

ByteMD是使用Svelte构建的Markdown编辑器组件。它也可以用于其他库/框架，如React，Vue和Angular。

我的项目采用的NUXT3,Github地址github.com/Dwsy/DDL-fr… 。

编辑器在线预览 ddlmock.dwsy.link/article/edi… 支持Markdown主题以及代码高亮主题的切换。

具体实现直接引入就行，主要是主题切换和夜间模式需要自己写，主题切换实现采用了css标签内容替换。Markdown主题和代码高亮主题都支持。

引入bytemd

yarn add @bytemd/vue-next
可选安装插件

引入css

import 'bytemd/dist/index.css'

因为bytemd底层采用的编辑器是CodeMirror官方有很多默认样式可以直接采用，对夜间模式的改造只要覆盖上面引入的样式就行了，CodeMirror官方有很多默认样式可以直接采用。

Typora编辑器采用的也是CodeMirror所以bytemd可以兼容Typora的主题

<template>
  <div class="main">
    <Editor
      id="d-Editor"
      :locale="zhHans"
      :plugins="plugins"
      :uploadImages="uploadImages"
      :value="content"
      class="editor"
      mode="split"
      placeholder="请输入"
      @change="handleChange"
    />
  </div>
</template>

使用@change响应输入文本 支持防抖

const handleChange = (text) => {
  content.value = text
}

主题切换

主题切换采用替换样式标签内容具体实现采用加载js文件的形式如： 加载掘金cyanosis主题只需要

let css = await import('juejin-markdown-themes/dist/cyanosis')
let markdownThemeStyleElement = document.querySelector('#markdownTheme')
if (markdownThemeStyleElement) {
  markdownThemeStyleElement.innerHTML = css.default
} else {
  // ('创建style标签')
  markdownThemeStyleElement = document.createElement('style')
  markdownThemeStyleElement.id = 'markdownTheme'
  markdownThemeStyleElement.innerHTML = css.default
  document.head.appendChild(markdownThemeStyleElement)
}

这里直接采用了掘金官方提供的主题js github.com/xitu/juejin…

module.exports = `样式`

后续添加其他主题的时候也采用了这样导入js替换css标签的方式。代码高亮同理。

主要使用了

github.com/imageslr/mw…

github.com/hliu202/typ…