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

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>
    );
  }
}