在react中使用markdown编辑器和md渲染插件

1. 安装markdown编辑器插件 for-editor

   yarn add for-editor 或 npm install for-editor

2. 引入插件

    import React, { Component } from "react"
    import style from "./editor.less"
    import Editor from 'for-editor'
   
    class Editormd extends Component {
        constructor(props) {
            super(props)
            this.state = {
                value: ''
            }
        }
   
        handleChange(value) {
            this.setState({
                value
            })
        }
   
        render() {
            const { value } = this.state
            return (
                <div className={style["editor-wrap"]}>
                    <Editor value={value} onChange={(value) => this.handleChange(value)} height="100%" />
                </div>
            )
        }
    }
   
    export default Editormd
    
   复制代码

3. 修改样式 editor.less

    .editor-wrap {
      width: 100%;
      height: 100%;
   
      :global {
        .for-toolbar {
          background: linear-gradient(to right, #55efc4, #81ecec, #74b9ff);
        }
   
        .for-container .for-editor .for-panel .for-preview {
          background-color: #fafafa;
        }
   
        .for-editor-edit::-webkit-scrollbar,
        .for-editor-preview::-webkit-scrollbar {
          width: 6px;
          height: 4px;
          background-color: transparent;
        }
   
        .for-editor-edit::-webkit-scrollbar-thumb,
        .for-editor-preview::-webkit-scrollbar-thumb {
          height: 4px;
          border-radius: 10px;
          background: linear-gradient(to bottom, #55efc4, #81ecec, #74b9ff);
        }
   
        .for-editor-edit::-webkit-scrollbar-track,
        .for-editor-preview::-webkit-scrollbar-track {
          /*滚动槽轨道样式*/
          border-radius: 0;
          background: rgba(0, 0, 0, 0.1);
        }
      }
   
    }
    
   复制代码

效果

4. 安装md渲染插件 react-markdown 以及代码高亮插件 react-syntax-highlighter

    import React from 'react'
    import { Fragment } from 'react'
    import ReactMarkdown from 'react-markdown'
    import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
    import { xonokai } from 'react-syntax-highlighter/dist/esm/styles/prism'
   
    const Code = {
        code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || '')
            return !inline && match ? (
                <SyntaxHighlighter style={xonokai} language={match[1]} PreTag="div" children={String(children).replace(/\n$/, '')} {...props} />
            ) : (
                <code className={className} {...props} />
            )
        }
    }
   
    function MarkDetail(props) {
        const { content } = props
   
        return (
            <Fragment>
                <ReactMarkdown
                    components={Code}
                    children={content}
                >
                    {/* {content} */}
                </ReactMarkdown>
            </Fragment>
        )
    }
   
    export default MarkDetail
    
   复制代码

效果

markdown主题参考 fenxianglu.cn/highlight.h…