如何使用 react-codemirror2 使用自定义 CodeMirror 模式

Question

在使用 react-codemirror2 时如何使用自定义 CodeMirror 模式？ CodeMirror.defineSimpleMode 和 CodeMirror.defineMode 在我导入后都未定义，如下所示：

import {UnControlled as CodeMirror} from "react-codemirror2";
import 'codemirror/lib/codemirror.css';

上下文：在我的 react 项目中，我想使用 CodeMirror 并定义我自己的输入语言，该语言与某些正则表达式匹配，然后突出显示它们以表明用户已正确输入它们。我还想要行号，没有换行，等宽字体，因此代码编辑器似乎接近我想要实现的目标。

Answer 1

您有两个选项可以使用 react-codemirror2 使用自定义模式。

1. 使用defineMode 属性并传入模式及其功能：

import { UnControlled as CodeMirror } from "react-codemirror2";
import 'codemirror/lib/codemirror.css';

<CodeMirror
  options={{
    lineNumbers: true,
    defineMode: {
      name: 'yourMode',
      fn: yourModeFunction
    },
    ...

  }}
  ...
/>;

1. 单独导入 CodeMirror 并在呈现控件之前定义您的模式：

import { UnControlled as CodeMirrorControl } from "react-codemirror2";
import 'codemirror/lib/codemirror.css';
import CodeMirror from 'codemirror';

CodeMirror.defineMode('yourMode', yourModeFunction);

<CodeMirrorControl
  options={{
    lineNumbers: true,
    ...
    mode: 'yourMode',
  }}
  ...
/>;