代码镜像如何创建模式

Codemirror how to create a mode

本文关键字：创建 模式 镜像 何创建 代码      更新时间：2023-09-26

我最近才接触到codemirror，因为我需要一个文本编辑器来编辑我的网站，但这意味着我对这个程序了解不多。我得到了使用javascript模式的编辑器，但我需要为编辑器创建一些语法，我认为这意味着我必须为编辑器创建一种模式，我在做这件事时遇到了麻烦。我已经阅读了几次手册，但有些东西就是不适合我，可能是因为我从来没有使用过这样的东西。无论如何，现在我只需要通过创建简单的加法、减法和乘法函数来掌握它的窍门。

首先，您确定需要一个新模式吗?您是否正在尝试支持一些自定义DSL语法，而这些语法尚未由许多内置模式之一提供?

手册对这方面的信息有一个良好的开端。它提到了对声明性方法使用简单模式插件的简单情况。讨论了使用CodeMirror.defineMode创建新模式，并提到了模式开发中最重要的功能token(stream, state):

一个函数，它接受一个字符流作为输入，将其向前推进到一个标记，并返回该标记的样式。

手册还提供了两个示例模式来查看。对于一个非常简单的模式，它建议diff，对于一个更复杂的模式，如。查看mode目录中可用的模式，看看是否不能修改现有模式以满足您的需要，这也是值得的。

仅供您参考，我将在下面包含diff模式内联:

// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE
(function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
    mod(require("../../lib/codemirror"));
  else if (typeof define == "function" && define.amd) // AMD
    define(["../../lib/codemirror"], mod);
  else // Plain browser env
    mod(CodeMirror);
})(function(CodeMirror) {
"use strict";
CodeMirror.defineMode("diff", function() {
  var TOKEN_NAMES = {
    '+': 'positive',
    '-': 'negative',
    '@': 'meta'
  };
  return {
    token: function(stream) {
      var tw_pos = stream.string.search(/['t ]+?$/);
      if (!stream.sol() || tw_pos === 0) {
        stream.skipToEnd();
        return ("error " + (
          TOKEN_NAMES[stream.string.charAt(0)] || '')).replace(/ $/, '');
      }
      var token_name = TOKEN_NAMES[stream.peek()] || stream.skipToEnd();
      if (tw_pos === -1) {
        stream.skipToEnd();
      } else {
        stream.pos = tw_pos;
      }
      return token_name;
    }
  };
});
CodeMirror.defineMIME("text/x-diff", "diff");
});

这是一个非常简单的模式，它甚至不包括任何状态信息(因此不包括'token'方法的第二个参数)。

相关文章：