Question

我在项目中使用React CodeMirror作为响应式文本编辑器。这就是我现在所拥有的：

<CodeMirror
  options={{
    mode: 'python',
    lineNumbers: true,
  }}
/>

我的问题是，有没有人知道是否可以通过传递道具来添加线条突出显示？也许是这样的？

<CodeMirror
  options={{
    mode: 'python',
    lineNumbers: true,
    lineHighlight: {
      from: 1,
      to: 10
    },
  }}
/>

这基本上会突出显示1到10之间的所有行。

谢谢！

Answer 1

如果按照上面 react-codemirror2 的建议使用 scniro，您可以使用 editorDidMount 事件道具，它为您提供对编辑器的直接引用。因此，React 解决方案可能类似于：

const highlightLines = (editor, start, end) => {
  const from: {line: start, ch: 0};
  const to: {line: end, ch: MAX_LINE_LENGTH};
  editor.markText(from, to, {className: "codemirror-highlighted"});
}

const HighlightedEditor = ({start, end}) =>
  <CodeMirror
    value={...}
    options={...}
    onBeforeChange={...}
    onChange={...}
    editorDidMount={editor => highlightLines(editor, start, end)}
  />

codemirror-highlighted 是具有您要应用的样式的 CSS 类。请注意，from 的 to 和 markText 参数接受具有行和字符属性的位置。另外，请注意行和字符都是零索引的。

编辑：如果您想稍后删除/更改应用的样式，您还需要跟踪 TextMarker 返回的 markText，以便您以后可以调用 {{1 }} 在上面。如果只是清除所有标记，编辑器使用 clear() 并清除！

Answer 2

参考这个文档： https://codemirror.net/demo/markselection.html

及相关代码：

 <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
  styleSelectedText: true
});
editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});
</script>

在React CodeMirror中突出显示行

2 个答案: