ByteMD基于 Svelte 的 Markdown 组件-轻识

ByteMD 是一个用 Svelte 构建的 Markdown 编辑器组件，由字节跳动开源。它也可以用于其他库/框架，例如 React、Vue 和 Angular。

特征

轻量级且与框架无关：ByteMD 是用Svelte 构建的，编译为 vanilla JS DOM 操作，无需导入任何 UI 框架运行时包，这使得它轻量级，并且很容易适应其他库/框架。
易于扩展：ByteMD 有一个插件系统来扩展基本的 Markdown 语法，可以很容易地添加额外的功能，如代码语法高亮、数学方程和美人鱼流程图。如果这些插件不能满足你的需求，你也可以编写自己的插件。
默认安全：ByteMD 已正确地处理跨站点脚本（XSS）攻击，如<script>与<img onerror>，无需引入额外的 DOM 清理步骤。
SSR 兼容：ByteMD 可用于服务器端渲染（SSR）环境，无需额外配置。SSR 在某些情况下被广泛使用，因为它具有更好的 SEO 和在慢速网络连接中快速获取内容。

用法

有两个组件：Editor和Viewer。Editor顾名思义就是 Markdown 编辑器；Viewer通常用于显示渲染的 Markdown 结果，无需编辑。

使用组件前，记得导入CSS文件，使样式正确：

import 'bytemd/dist/index.min.css'

Svelte

<script>
  import { Editor, Viewer } from 'bytemd';
  import gfm from '@bytemd/plugin-gfm';

  let value;
  const plugins = [
    gfm(),
    // Add more plugins here
  ];

  function handleChange(e) {
    value = e.detail.value;
  }
</script>

<template>
  <Editor {value} {plugins} on:change={handleChange} />
</template>

React

import { Editor, Viewer } from '@bytemd/react'
import gfm from '@bytemd/plugin-gfm'

const plugins = [
  gfm(),
  // Add more plugins here
]

const App = () => {
  const [value, setValue] = useState('')

  return (
    <Editor
      value={value}
      plugins={plugins}
      onChange={(v) => {
        setValue(v)
      }}
    />
  )
}

Vue

<template>
  <Editor :value="value" :plugins="plugins" @change="handleChange" />
</template>

<script>
import { Editor, Viewer } from '@bytemd/vue'
import gfm from '@bytemd/plugin-gfm'

const plugins = [
  gfm(),
  // Add more plugins here
]

export default {
  components: { Editor },
  data() {
    return { value: '', plugins }
  },
  methods: {
    handleChange(v) {
      this.value = v
    },
  },
}
</script>

Vanilla JS

import { Editor, Viewer } from 'bytemd'
import gfm from '@bytemd/plugin-gfm'

const plugins = [
  gfm(),
  // Add more plugins here
]

const editor = new Editor({
  target: document.body, // DOM to render
  props: {
    value: '',
    plugins,
  },
})

editor.$on('change', (e) => {
  editor.$set({ value: e.detail.value })
})