使用codeMirror实现代码对比高亮

codeMirror 代码对比
●安装 codeMirror
●安装 diff-match-path\

import {useRef} from 'react'
import CodeMirrorComPonent from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/ttcn.css'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/mode/sql/sql'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/comment-fold'
import 'codemirror/addon/fold/indent-fold'
import 'codemirror/addon/fold/foldgutter.css'
//---------以下为对比需引入的
import 'codemirror/addon/merge/merge'
import 'codemirror/addon/merge/merge.css'
import DiffMatchPatch from 'diff-match-patch'
import * as sqlFormatter from 'sql-formatter'

// --------diffMatchPath配置搭到window上
window.diff_match_patch = DiffMatchPatch
window.DIFF_DELETE = -1
window.DIFF_INSERT = 1
window.DIFF_EQUAL = 0

const CodeDemo = ({})=>{
    const compareEditor = useRef(null)
  useEffect(() => {
    if (compareEditor?.current) {
      initCompareView()
    }
    return () => {
      // 最好在组件卸载的时候清空compareEditor一下
      if (compareEditor?.current) {
       compareEditor.current.innerHtml=''
      }
    }
  }, [,compareEditor])

  const initCompareView = () => {
    const targetDiv = compareEditor.current
    CodeMirrorComPonent.MergeView(targetDiv, {
      value: leftSideCode, // 左半边的代码
      origLeft: null,
      orig: rightSideCode, // 右半边的代码
      lineNumbers: true,
      highlightDifferences: true,
      connect: 'align',
      readOnly: true, // 只读 不可修改
    })
  }

  return (
    <div>
       <div
          ref={compareEditor}
        />
    </div>
  )
}