Reactjs 如何在代码镜像编辑器中更改特定的令牌样式？ import React，{Component}来自“React”； 从“react dom”导入{render}； 从“react CodeMirror”导入CodeMirror； 导入“/style.css”； 导入“codemirror/lib/codemirror.css”； 类应用程序扩展组件{ 构造函数（）{ 超级（）； 此.state={ 名称：“CodeMirror”， 代码：“你好，世界代码镜像” }; } 更新代码（新代码）{ 这是我的国家({ 代码：新代码 }); } render（）{ 让选项={ 行号：对 }; 返回(

开始编辑以查看发生的奇迹：）

); } } render（，document.getElementById（“根”））； 我正在开发一个标记器，希望突出显示代码中的特定标记

如何在特定标记下加下划线或加粗，如本例中的

world

文本

---

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

您可以使用

codemirr.overlymode

实现这一点。您需要定义自己的模式来解析codemirror的内容，并为自定义令牌设置一些类

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

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

然后，您需要为您的令牌设置一个具有样式的类：

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

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

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

import React，{Component}来自“React”；
从“react CodeMirror”导入CodeMirror；
导入“codemirror/lib/codemirror.css”；
导入“/style.css”；//在此处添加.cm自定义关键字类
导入“/customHighlightsMode”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“CodeMirror”，
代码：“你好，世界代码镜像”
};
}
更新代码（新代码）{
这是我的国家({
代码：新代码
});
}
render（）{
让选项={
行号：对，
模式：{name:“customHighlights”}，
};
返回(
开始编辑以查看发生的奇迹：）

);
}
}

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