如何使用使用react CodeMirror 2的自定义CodeMirror模式

Question

在使用react CodeMirror 2时，如何使用自定义的CodeMirror模式？导入后，CodeMirror.defineSimpleMode和CodeMirror.defineMode都没有定义，如下所示：

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

上下文:在我的react项目中，我想使用CodeMirror并定义我自己的输入语言，它与某些正则表达式相匹配，然后突出显示用户已经正确地输入了它们。我也想要行号，没有包装，单空格字体，因此代码编辑器似乎接近我想要实现的。

Answer 1

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

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',
  }}
  ...
/>;