如何使用 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
    },
    ...

  }}
  ...
/>;

2. 单独导入 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',
  }}
  ...
/>;