ByteMD实现markdown

介绍

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

特性

• 轻量级和框架无关:ByteMD是用Svelte构建的。它编译成普通的JS DOM操作，而不需要导入任何UI框架运行时包，这使得它轻量级，并且很容易适应其他库/框架。
• 易于扩展:ByteMD有一个插件系统来扩展基本的Markdown语法，这使得它很容易添加额外的功能，如代码语法高亮，数学方程和美人鱼流程图。如果这些插件不能满足你的需要，你也可以编写自己的插件。
• 默认安全:跨站点脚本(XSS)攻击，如<script>和<img onerror>已被ByteMD正确处理。不需要引入额外的DOM净化步骤。
• SSR兼容:ByteMD可以在服务器端呈现(SSR)环境中使用，无需额外配置。SSR具有较好的搜索引擎优化和在慢速网络连接下快速访问内容的优点，在某些情况下得到了广泛的应用。

插件

ByteMD为定制提供了一个强大的插件系统。有几个官方插件支持的功能，如代码语法高亮，数学方程和流程图。

如果您有更多的定制需求，您也可以编写自己的插件来支持它们。

官方插件

安装

npm install --save bytemd
npm install --save @bytemd/react

使用

框架环境React。

引入编辑器

import React, {  useState } from 'react';
import styled from 'styled-components';
import { Editor } from '@bytemd/react';

function MarkDownEditor(props: PropsType) {
    const [value, setValue] = useState('');

    const onChange = (v: string) => {
        setValue(v)
    };
    return (
        <Wrap>
            <Editor value={value} onChange={onChange} {...props.editorProps} />
        </Wrap>
    );
}

export default MarkDownEditor;

效果图：

引入默认布局样式

import 'bytemd/dist/index.css';

效果图：

中文显示

import zh_Hans from 'bytemd/locales/zh_Hans.json';

function MarkDownEditor(props: PropsType) {
    return (
        <Wrap>
            <Editor
                locale={zh_Hans}
            />
        </Wrap>
    );
}

export default MarkDownEditor;

效果图：

支持GFM

安装插件:

# 支持GFM(自动链接文字、删除、表格、任务列表)
npm install --save @bytemd/plugin-gfm

使用：

import gfm from '@bytemd/plugin-gfm';

const plugins: BytemdPlugin[] = [
    gfm()
];

function MarkDownEditor(props: PropsType) {
    return (
        <Wrap>
            <Editor
                plugins={plugins}
            />
        </Wrap>
    );
}

export default MarkDownEditor;

效果图：

高亮显示代码块

安装插件:

# 高亮显示代码块
npm install --save @bytemd/plugin-highlight

使用：

import highlight from '@bytemd/plugin-highlight';
import 'highlight.js/styles/monokai-sublime.css';

const plugins: BytemdPlugin[] = [
    highlight()
];

function MarkDownEditor(props: PropsType) {
    return (
        <Wrap>
            <Editor
                plugins={plugins}
            />
        </Wrap>
    );
}
export default MarkDownEditor;

效果图：

解析前辅文

安装插件:

# 高亮显示代码块
npm install --save @bytemd/plugin-frontmatter

使用：

import frontmatter from '@bytemd/plugin-frontmatter';

const plugins: BytemdPlugin[] = [
    frontmatter()
];

function MarkDownEditor(props: PropsType) {
    return (
        <Wrap>
            <Editor
                plugins={plugins}
            />
        </Wrap>
    );
}
export default MarkDownEditor;

效果图：

支持数学公式

安装插件:

# 高亮显示代码块
npm install --save @bytemd/plugin-frontmatter

使用：

import math from '@bytemd/plugin-math';

const plugins: BytemdPlugin[] = [
    math()
];

function MarkDownEditor(props: PropsType) {
    return (
        <Wrap>
            <Editor
                plugins={plugins}
            />
        </Wrap>
    );
}
export default MarkDownEditor;

效果图：

支持流程图

安装插件:

# 高亮显示代码块
npm install --save @bytemd/plugin-frontmatter

使用：

import mermaid from '@bytemd/plugin-mermaid';

const plugins: BytemdPlugin[] = [
    mermaid()
];

function MarkDownEditor(props: PropsType) {
    return (
        <Wrap>
            <Editor
                plugins={plugins}
            />
        </Wrap>
    );
}
export default MarkDownEditor;

效果图：

支持Gemoji短码

安装插件:

# 高亮显示代码块
npm install --save @bytemd/plugin-frontmatter

使用：

import gemoji from '@bytemd/plugin-gemoji';

const plugins: BytemdPlugin[] = [
    gemoji()
];

function MarkDownEditor(props: PropsType) {
    return (
        <Wrap>
            <Editor
                plugins={plugins}
            />
        </Wrap>
    );
}
export default MarkDownEditor;

效果图：

支持缩放图像和中断

安装插件:

npm install --save @bytemd/plugin-medium-zoom
npm install --save @bytemd/plugin-breaks

使用：

import breaks from '@bytemd/plugin-breaks';
import mediumZoom from '@bytemd/plugin-medium-zoom';

const plugins: BytemdPlugin[] = [
    breaks(),
    mediumZoom(),
];

function MarkDownEditor(props: PropsType) {
    return (
        <Wrap>
            <Editor
                plugins={plugins}
            />
        </Wrap>
    );
}
export default MarkDownEditor;

支持上传图片

默认没有上传图标，需指定uploadImages函数处理上传图像。如果设置，图像图标将出现在工具栏上。

代码实现：

import { onUploadImagesApi } from '@api/photosApi';

function MarkDownEditor(props: PropsType) {
    const onUploadImagesHandle = async (
        files: File[]
    ): Promise<Pick<any, 'title' | 'url'>[]> => {
        const list: { title: string; url: string }[] = [];
        const res = await onUploadImagesApi(files);
        const data = res?.data || {};
        if (data.code === 200) {
            (data.data || []).forEach((o: any,i:number) => {
                list.push({
                    title: o.filename,
                    url: o.fileURl,
                });
            });
        }
        return Promise.resolve(list);
    };
    return (
            <Editor
                uploadImages={onUploadImagesHandle}
            />
    );
}

效果图：

到这里常用的功能就可以使用啦。

资源连接

• ByteMD官网：bytemd.js.org/
• ByteMD仓库：github.com/bytedance/b…
• ByteMD在线体验：bytemd.js.org/playground/
• 掘金主题：github.com/xitu/juejin…
• 掘金主题在线体验：juejin-theme.netlify.app/