Codemirror -基于标签对线条进行着色

CodeMirror 是一个流行的代码编辑器库，它允许你通过自定义样式和插件来扩展其功能。要根据标签对线条进行着色，你可以使用 CodeMirror 的 markText 方法来标记文本，并应用自定义样式。以下是一个简单的示例，展示了如何根据标签对代码行进行着色：

步骤 1: 引入 CodeMirror

首先，确保你已经在项目中引入了 CodeMirror。你可以通过 CDN 引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>

步骤 2: 创建 CodeMirror 实例

在你的 HTML 文件中创建一个容器元素，并在其中初始化 CodeMirror 实例：

<div id="code-editor"></div>
<script>
  var editor = CodeMirror(document.getElementById('code-editor'), {
    value: "function myScript(){\n  return 100;\n}\n",
    mode:  "javascript",
    lineNumbers: true
  });
</script>

步骤 3: 根据标签着色

你可以编写一个函数来扫描代码中的特定标签，并使用 markText 方法来应用样式。例如，假设你想根据行内注释 // color: red 来着色：

function colorLinesByTag(editor, tag) {
  const regex = new RegExp(`//\\s*${tag}\\s*:\\s*(red|green|blue)`, 'g');
  let match;
  while ((match = regex.exec(editor.getValue())) !== null) {
    const [fullMatch, color] = match;
    const start = editor.posFromIndex(match.index);
    const end = editor.posFromIndex(regex.lastIndex);
    editor.markText(start, end, { className: `color-${color}` });
  }
}

// 使用示例
colorLinesByTag(editor, 'color');

步骤 4: 添加 CSS 样式

在你的 CSS 文件中添加相应的样式规则：

.color-red {
  background-color: #ffcccc;
}

.color-green {
  background-color: #ccffcc;
}

.color-blue {
  background-color: #ccccff;
}

完整示例

将上述代码片段组合在一起，你将得到一个可以根据行内注释着色的 CodeMirror 实例。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CodeMirror Line Coloring</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">
  <style>
    .color-red {
      background-color: #ffcccc;
    }
    .color-green {
      background-color: #ccffcc;
    }
    .color-blue {
      background-color: #ccccff;
    }
  </style>
</head>
<body>
  <div id="code-editor"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>
  <script>
    var editor = CodeMirror(document.getElementById('code-editor'), {
      value: "function myScript(){\n  // color: red\n  return 100;\n}\n",
      mode:  "javascript",
      lineNumbers: true
    });

    function colorLinesByTag(editor, tag) {
      const regex = new RegExp(`//\\s*${tag}\\s*:\\s*(red|green|blue)`, 'g');
      let match;
      while ((match = regex.exec(editor.getValue())) !== null) {
        const [fullMatch, color] = match;
        const start = editor.posFromIndex(match.index);
        const end = editor.posFromIndex(regex.lastIndex);
        editor.markText(start, end, { className: `color-${color}` });
      }
    }

    // 使用示例
    colorLinesByTag(editor, 'color');
  </script>
</body>
</html>

这个示例展示了如何根据行内注释中的特定标签来着色代码行。你可以根据需要调整正则表达式和样式规则。