reactjs - 如何在代码镜像编辑器中更改特定令牌样式？

Question

import React, { Component } from "react";
import { render } from "react-dom";
import CodeMirror from "react-codemirror";
import "./style.css";
import "codemirror/lib/codemirror.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "CodeMirror",
      code: "Hello world Code Mirror"
    };
  }

  updateCode(newCode) {
    this.setState({
      code: newCode
    });
  }

  render() {
    let options = {
      lineNumbers: true
    };
    return (
      <div>
        <p>Start editing to see some magic happen :)</p>
        <CodeMirror
          value={this.state.code}
          onChange={this.updateCode.bind(this)}
          options={options}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

我正在开发一个标记器，并想从代码中突出显示一个特定的标记。

如何在特定标记下划线或加粗，例如world这种情况下的文本？

或者是否有任何其他代码编辑器库可以突出显示给定开始和结束索引的任何子字符串？

Answer 1

您可以通过使用CodeMirror.overlayMode. 您需要定义自己的模式来解析 codemirror 的内容并为您的自定义令牌设置一些类。

假设您在 customHighlightsMode.js 文件中定义了您的模式：

import CodeMirror from 'codemirror';
import 'codemirror/addon/mode/overlay';

CodeMirror.defineMode("customHighlights", function (config, parserConfig) {
    var myOverlay = {
        token: function (stream) {
            if (stream.match(/(world)/)) {
                return 'custom-keyword';
            } else {
                stream.next();
                return null;
            }
        }
    };
    return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop), myOverlay);
});

然后你需要为你的标记设置一个带有样式的类：

.cm-custom-keyword {
  font-weight: bold;
  color: red;
}

然后你需要在 CodeMirror 选项中设置你的模式：

import React, { Component } from "react";
import CodeMirror from "react-codemirror";
import "codemirror/lib/codemirror.css";
import "./style.css"; // add .cm-custom-keyword class here
import "./customHighlightsMode";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "CodeMirror",
      code: "Hello world Code Mirror"
    };
  }

  updateCode(newCode) {
    this.setState({
      code: newCode
    });
  }

  render() {
    let options = {
      lineNumbers: true,
      mode: { name: "customHighlights" },
    };
    return (
      <div>
        <p>Start editing to see some magic happen :)</p>
        <CodeMirror
          value={this.state.code}
          onChange={this.updateCode.bind(this)}
          options={options}
        />
      </div>
    );
  }
}