1. Install the Markdown editor plug-in for-editor

    Yarn add for-editor or NPM install for-editor

  2. The introduction of the plugin

     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
 
Copy the code

  3. Modify the style 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); }}}Copy the code

The effect

  1. Install the MD rendering plugin react-markDown and the code highlighting plugin 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 MarkDetailCopy the code

The effect

Markdown theme referenceFenxianglu. Cn/highlight. H…