CodeMirror 是一款非常老牌的Web编辑器，目前已经发展到 v6 版本，不过 v6 仍处于测试阶段，今天笔者以5.57.0版本进行介绍。Monaco Editor 相较就年轻得多了，尽管如此而它的名气却一点都不小；只因它与VSCode 使用的同一款核心代码。接下来笔者将从“使用方法”、“可扩展性”、“性能”三方面来对这两款编辑器进行比较。

使用方法

初始化方法

相对来说 CodeMirror 的初始化方式比较多，而 Monaco 仅有一种(这不影响各种功能的实现)；但 Monaco 胜在自带 Diff 编辑器。

CodeMirror

方式一：插入到某个容器节点内，比如 body，或者 #root。

  1. <div id="root"></div>
  1. import CodeMirror from "codemirror";
  2. import "codemirror/mode/sql/sql";
  3. import "codemirror/lib/codemirror.css";
  5. CodeMirror(document.getElementById("root"), {
  6.   value: `-- SQL Mode for CodeMirror
  7. SELECT SQL_NO_CACHE DISTINCT
  8.     @var1 AS \`val1\`, @'val2', @global.'sql_mode',
  9.     1.1 AS \`float_val\`, .14 AS \`another_float\`, 0.09e3 AS \`int_with_esp\`,
  10.     0xFA5 AS \`hex\`, x'fa5' AS \`hex2\`, 0b101 AS \`bin\`, b'101' AS \`bin2\`,
  11.     DATE '1994-01-01' AS \`sql_date\`, { T "1994-01-01" } AS \`odbc_date\`,
  12.     'my string', _utf8'your string', N'her string',
  13.         TRUE, FALSE, UNKNOWN
  14.   FROM DUAL
  15.   -- space needed after '--'
  16.   # 1 line comment
  17.   /* multiline
  18.   comment! */
  19.   LIMIT 1 OFFSET 0;
  20. `,
  21.   mode: "text/x-sql",
  22.   indentWithTabs: true,
  23.   smartIndent: true,
  24.   lineNumbers: true,
  25.   matchBrackets: true,
  26.   autofocus: true
  27. });

方式二：在函数中做任何节点操作，比如 replaceWith (替换某节点)、insertBefore (插入在某节点前面)、append 等等。

  1. <div id="root">
  2.   <div id="replace"></div>
  3. </div>
  1. import CodeMirror from "codemirror";
  2. import "codemirror/mode/sql/sql";
  3. import "codemirror/lib/codemirror.css";
  5. CodeMirror(
  6.   editor => {
  7.     document.getElementById("replace").replaceWith(editor);
  8.   },
  9.   {
  10.     value: `-- SQL Mode for CodeMirror
  11. SELECT SQL_NO_CACHE DISTINCT
  12.     @var1 AS \`val1\`, @'val2', @global.'sql_mode',
  13.     1.1 AS \`float_val\`, .14 AS \`another_float\`, 0.09e3 AS \`int_with_esp\`,
  14.     0xFA5 AS \`hex\`, x'fa5' AS \`hex2\`, 0b101 AS \`bin\`, b'101' AS \`bin2\`,
  15.     DATE '1994-01-01' AS \`sql_date\`, { T "1994-01-01" } AS \`odbc_date\`,
  16.     'my string', _utf8'your string', N'her string',
  17.         TRUE, FALSE, UNKNOWN
  18.   FROM DUAL
  19.   -- space needed after '--'
  20.   # 1 line comment
  21.   /* multiline
  22.   comment! */
  23.   LIMIT 1 OFFSET 0;
  24. `,
  25.     mode: "text/x-sql",
  26.     indentWithTabs: true,
  27.     smartIndent: true,
  28.     lineNumbers: true,
  29.     matchBrackets: true,
  30.     autofocus: true
  31.   }
  32. );

方式三：直接替换某个 Textarea，并将该 Textarea 的值做为编辑器的初始值。

  1. <div id="root">
  2.   <textarea id="textarea">
  3. -- SQL Mode for CodeMirror
  4. SELECT SQL_NO_CACHE DISTINCT
  5.     @var1 AS `val1`, @'val2', @global.'sql_mode',
  6.     1.1 AS `float_val`, .14 AS `another_float`, 0.09e3 AS `int_with_esp`,
  7.     0xFA5 AS `hex`, x'fa5' AS `hex2`, 0b101 AS `bin`, b'101' AS `bin2`,
  8.     DATE '1994-01-01' AS `sql_date`, { T "1994-01-01" } AS `odbc_date`,
  9.     'my string', _utf8'your string', N'her string',
  10.         TRUE, FALSE, UNKNOWN
  11.   FROM DUAL
  12.   -- space needed after '--'
  13.   # 1 line comment
  14.   /* multiline
  15.   comment! */
  16.   LIMIT 1 OFFSET 0;
  17.   </textarea>
  18. </div>
  1. import CodeMirror from "codemirror";
  2. // 5.x版本的CodeMirror核心代码已经全部改造成了es6的Module语法；
  3. // 但各种mode文件还依然使用着requireJs的书写语法，所以只要直接引入就好
  4. import "codemirror/mode/sql/sql";
  5. import "codemirror/lib/codemirror.css";
  7. CodeMirror.fromTextArea(document.getElementById("textarea"), {
  8.   mode: "text/x-sql",
  9.   indentWithTabs: true,
  10.   smartIndent: true,
  11.   lineNumbers: true,
  12.   matchBrackets: true,
  13.   autofocus: true
  14. });

Monaco Editor

Monaco Editor 的初始化方式没有那么多，仅有下面一种，但这并不影响满足各种场景需求。

  1. <div id="root"></div>
  1. import { editor } from "monaco-editor";
  3. // 一定要保证容器有一定的宽度和高度
  4. editor.create(document.getElementById("root"), {
  5.   language: "sql",
  6.   value: `-- SQL Mode for CodeMirror
  7.   SELECT SQL_NO_CACHE DISTINCT
  8.     @var1 AS \`val1\`, @'val2', @global.'sql_mode',
  9.     1.1 AS \`float_val\`, .14 AS \`another_float\`, 0.09e3 AS \`int_with_esp\`,
  10.     0xFA5 AS \`hex\`, x'fa5' AS \`hex2\`, 0b101 AS \`bin\`, b'101' AS \`bin2\`,
  11.     DATE '1994-01-01' AS \`sql_date\`, { T "1994-01-01" } AS \`odbc_date\`,
  12.     'my string', _utf8'your string', N'her string',
  13.         TRUE, FALSE, UNKNOWN
  14.   FROM DUAL
  15.   -- space needed after '--'
  16.   # 1 line comment
  17.   /* multiline
  18.   comment! */
  19.   LIMIT 1 OFFSET 0;
  20. `
  21. });

Diff 效果

CodeMirror

CodeMirror 在已有的 mode 中有一种 diff mode 可供选择使用，具体效果如下：

  1. .CodeMirror {
  2.   border-top: 1px solid #ddd;
  3.   border-bottom: 1px solid #ddd;
  4. }
  5. span.cm-meta {
  6.   color: #a0b !important;
  7. }
  8. span.cm-error {
  9.   background-color: black;
  10.   opacity: 0.4;
  11. }
  12. span.cm-error.cm-string {
  13.   background-color: red;
  14. }
  15. span.cm-error.cm-tag {
  16.   background-color: #2b2;
  17. }
  1. import CodeMirror from "codemirror";
  2. import "codemirror/mode/diff/diff";
  3. import "codemirror/lib/codemirror.css";
  4. import "./styles.css";
  6. CodeMirror(document.getElementById("root"), {
  7.   value: `diff --git a/index.html b/index.html
  8. index c1d9156..7764744 100644
  9. --- a/index.html
  10. +++ b/index.html
  11. @@ -95,7 +95,8 @@ StringStream.prototype = {
  12.       <script>
  13.         var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  14.           lineNumbers: true,
  15. -        autoMatchBrackets: true
  16. +        autoMatchBrackets: true,
  17. +      onGutterClick: function(x){console.log(x);}
  18.         });
  19.       </script>
  20.     </body>
  21. diff --git a/lib/codemirror.js b/lib/codemirror.js
  22. index 04646a9..9a39cc7 100644
  23. --- a/lib/codemirror.js
  24. +++ b/lib/codemirror.js
  25. @@ -399,10 +399,16 @@ var CodeMirror = (function() {
  26.       }
  28.       function onMouseDown(e) {
  29. -      var start = posFromMouse(e), last = start;    
  30. +      var start = posFromMouse(e), last = start, target = e.target();
  31.         if (!start) return;
  32.         setCursor(start.line, start.ch, false);
  33.         if (e.button() != 1) return;
  34. +      if (target.parentNode == gutter) {    
  35. +        if (options.onGutterClick)
  36. +          options.onGutterClick(indexOf(gutter.childNodes, target) + showingFrom);
  37. +        return;
  38. +      }
  39. +
  40.         if (!focused) onFocus();
  42.         e.stop();
  43. @@ -808,7 +814,7 @@ var CodeMirror = (function() {
  44.         for (var i = showingFrom; i < showingTo; ++i) {
  45.           var marker = lines[i].gutterMarker;
  46.           if (marker) html.push('<div class="' + marker.style + '">' + htmlEscape(marker.text) + '</div>');
  47. -        else html.push("<div>" + (options.lineNumbers ? i + 1 : "\u00a0") + "</div>");
  48. +        else html.push("<div>" + (options.lineNumbers ? i + options.firstLineNumber : "\u00a0") + "</div>");
  49.         }
  50.         gutter.style.display = "none"; // TODO test whether this actually helps
  51.         gutter.innerHTML = html.join("");
  52. @@ -1371,10 +1377,8 @@ var CodeMirror = (function() {
  53.           if (option == "parser") setParser(value);
  54.           else if (option === "lineNumbers") setLineNumbers(value);
  55.           else if (option === "gutter") setGutter(value);
  56. -        else if (option === "readOnly") options.readOnly = value;
  57. -        else if (option === "indentUnit") {options.indentUnit = indentUnit = value; setParser(options.parser);}
  58. -        else if (/^(?:enterMode|tabMode|indentWithTabs|readOnly|autoMatchBrackets|undoDepth)$/.test(option)) options[option] = value;
  59. -        else throw new Error("Can't set option " + option);
  60. +        else if (option === "indentUnit") {options.indentUnit = value; setParser(options.parser);}
  61. +        else options[option] = value;
  62.         },
  63.         cursorCoords: cursorCoords,
  64.         undo: operation(undo),
  65. @@ -1402,7 +1406,8 @@ var CodeMirror = (function() {
  66.         replaceRange: operation(replaceRange),
  68.         operation: function(f){return operation(f)();},
  69. -      refresh: function(){updateDisplay([{from: 0, to: lines.length}]);}
  70. +      refresh: function(){updateDisplay([{from: 0, to: lines.length}]);},
  71. +      getInputField: function(){return input;}
  72.       };
  73.       return instance;
  74.     }
  75. @@ -1420,6 +1425,7 @@ var CodeMirror = (function() {
  76.       readOnly: false,
  77.       onChange: null,
  78.       onCursorActivity: null,
  79. +    onGutterClick: null,
  80.       autoMatchBrackets: false,
  81.       workTime: 200,
  82.       workDelay: 300,`,
  83.   mode: "text/x-diff",
  84.   indentWithTabs: true,
  85.   smartIndent: true,
  86.   lineNumbers: true,
  87.   matchBrackets: true,
  88.   autofocus: true
  89. });

从示例的 value 值可见，在使用 diff 时需要自己先将两个文件的内容差异区分出来，然后组装成如示例所示的文本内容后才能使用，以达到预期效果。效果图如下：
截屏2020-09-02 14.25.44.png

Monaco Editor

相比之下 Monaco Editor 的 diff 功能就强大得多了，请看示例：

  1. import { editor } from "monaco-editor";
  2. import "./styles.css";
  4. const originalModel = editor.createModel(
  5.   `(function (global, undefined) {
  6.   "use strict";
  7.   undefinedVariable = {};
  8.   undefinedVariable.prop = 5;
  10.   function initializeProperties(target, members) {
  11.     var keys = Object.keys(members);
  12.     var properties;
  13.     var i, len;
  14.     for (i = 0, len = keys.length; i < len; i++) {
  15.       var key = keys[i];
  16.       var enumerable = key.charCodeAt(0) !== /*_*/95;
  17.       var member = members[key];
  18.       if (member && typeof member === 'object') {
  19.         if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') {
  20.           if (member.enumerable === undefined) {
  21.             member.enumerable = enumerable;
  22.           }
  23.           properties = properties || {};
  24.           properties[key] = member;
  25.           continue;
  26.         } 
  27.       }
  28.       // These next lines will be deleted
  29.       if (!enumerable) {
  30.         properties = properties || {};
  31.         properties[key] = { value: member, enumerable: enumerable, configurable: true, writable: true }
  32.         continue;
  33.       }
  34.       target[key] = member;
  35.     }
  36.     if (properties) {
  37.       Object.defineProperties(target, properties);
  38.     }
  39.   }
  40. })(this);`,
  41.   "text/javascript"
  42. );
  43. var modifiedModel = editor.createModel(
  44.   `(function (global, undefined) {
  45.   "use strict";
  46.   var definedVariable = {};
  47.   definedVariable.prop = 5;
  49.   function initializeProperties(target, members) {
  50.     var keys = Object.keys(members);
  51.     var properties;
  52.     var i, len;
  53.     for (i = 0, len = keys.length; i < len; i++) {
  54.       var key = keys[i];
  55.       var enumerable = key.charCodeAt(0) !== /*_*/95;
  56.       var member = members[key];
  57.       if (member && typeof member === 'object') {
  58.         if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') {
  59.           if (member.enumerable === undefined) {
  60.             member.enumerable = enumerable;
  61.           }
  62.           properties = properties || {};
  63.           properties[key] = member;
  64.           continue;
  65.         } 
  66.       }
  67.       target[key] = member;
  68.     }
  69.     if (properties) {
  70.       Object.defineProperties(target, properties);
  71.     }
  72.   }
  73. })(this);`,
  74.   "text/javascript"
  75. );
  77. const diffEditor = editor.createDiffEditor(
  78.   document.getElementById("root"),
  79.   {
  80.     enableSplitViewResizing: false
  81.   }
  82. );
  83. diffEditor.setModel({
  84.   original: originalModel,
  85.   modified: modifiedModel
  86. });

已上面的示例看出，只要直接提供需要比较的内容，Monaco 的 diff editor 就会自动进行对比，然后显示出来。是在一个编辑器内显示，还是分两个编辑器显示效果，是可以进行配置的。这一点比起 CodeMirror 的 diff mode 方便太多了。效果图如下：
截屏2020-09-02 14.26.41.png

可扩展性

在扩展方面，笔者将从“新增一种新的语言( mode )”、“功能扩展”两方面进行对比介绍。

增加一种新的语言(mode)

目前 CodeMirror 支持100+种 mode (语言)，Monaco Editor 支持几十种，两者都几乎涵盖了主流语言。另外这两款编辑器都具备自定义语言的能力，下面我们分别来看。

CodeMirror

CodeMirror 可以通过 CodeMirror.defineMode 来注册一种新的 mode (帮助文档)。示意代码如下：

  1. // 第一个参数：用小写字母命名的modeName
  2. // 第二个参数：回调函数，返回模式对象
  3. CodeMirror.defineMode("sql", function(config, parserConfig) {
  4.   // config 是CodeMirror的配置对象
  5.   // parserConfig 是可选的模式配置对象
  7.   // 你的模式定义代码；解析编辑器的内容
  9.   return {
  10.     token: (stream, state) => { return style }, // 必选，返回高亮样式
  11.     indent: (state, textAfter) => { return 0 }, // 可选，定义缩进规则，返回缩进空格数
  12.     // 其他可选项
  13.   };
  14. }

CodeMirror 还提供了 innerMode 用于嵌套语法的场景，比如 HTML 中会混杂 CSS、JavaScript 语法。示意代码如下：

  1. // 代码来源于CodeMirror源码
  2. CodeMirror.defineMode("htmlmixed", function (config, parserConfig) {
  3.     var htmlMode = CodeMirror.getMode(config, {
  4.       name: "xml",
  5.       htmlMode: true
  6.     });
  8.   return {
  9.     // 定义起始状态，这里可以区分当前是在哪个标签内(style/script)
  10.     startState: function () {
  11.       var state = CodeMirror.startState(htmlMode);
  12.       return {token: html, inTag: null, localMode: null, localState: null, htmlState: state};
  13.     },
  14.       token: function (stream, state) {
  15.       return state.token(stream, state);
  16.     },
  17.     innerMode: function (state) {
  18.       return {state: state.localState || state.htmlState, mode: state.localMode || htmlMode};
  19.     },
  20.     // 其他项已经被省略，需要的小伙伴请自行查阅CodeMirror源码
  21.   };
  22. }, "xml", "javascript", "css");

注：想要了解嵌套组合多个 mode 如何运用，可以参考 mode 帮助文档内容，和源码中的 mode/htmlmixed 中的内容。

在 CodeMirror 中定义了 mode 之后还需要跟 MIME 关联起来，在使用时指定的 mode 其实是 MIME。笔者认为CodeMirror 如此设计解决了相似语言的快捷定义。这点在 SQL 语言中很常见，关系型数据库有很多种，这些数据库的基本语法基本一致，但很多数据库使用的非标准 SQL (如 MySQL、SQLServer 等)，有自己的特点，那么使用MIME来定义不同的 SQL 语言就极为合适了。定义MIME的示例如下：

  1. CodeMirror.defineMIME("text/x-mysql", {
  2.   name: 'sql', // name 对应关联的mode
  3.   // 其他配置项，会作为 defineMode 第二个回调函数的第二个入参传入
  4. });

另外 CodeMirror 还提供了定义 Simple Mode 的形式 CodeMirror.defineSimpleMode 可以更便捷的定义一种全新的语言，读者有兴趣可以自行了解。

Monaco Editor

Monaco Editor也可以注册新语言，简单示例如下：

  1. // Register a new language
  2. monaco.languages.register({ id: 'mySpecialLanguage' });
  4. // Register a tokens provider for the language
  5. // 定义新语言的主体内容在这里
  6. monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
  7.     tokenizer: { // 相当于CodeMirror中的token；
  8.         root: [
  9.             [/\[error.*/, "custom-error"], // 第一项是匹配规则，第二项是token名
  10.             [/\[notice.*/, "custom-notice"],
  11.             [/\[info.*/, "custom-info"],
  12.             [/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
  13.         ]
  14.     }
  15. });
  17. // Define a new theme that contains only rules that match this language
  18. // 在CodeMirror中是直接在css文件中定义样式
  19. monaco.editor.defineTheme('myCoolTheme', {
  20.     base: 'vs',
  21.     inherit: false,
  22.     rules: [
  23.     // 这里的token跟上面的tokenizer一一对应，
  24.         { token: 'custom-info', foreground: '808080' },
  25.         { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
  26.         { token: 'custom-notice', foreground: 'FFA500' },
  27.         { token: 'custom-date', foreground: '008800' },
  28.     ]
  29. });

Monaco 的语言定义是配置化的，语言之间的嵌套是通过 nextEmbedded 属性来进行配置的，HTML标签中的 style 标签的定义如下（更多内容可以参考 Monarch）：

  1. root: [
  2.   [/<style\s*>/,   { token: 'keyword', bracket: '@open'
  3.                    , next: '@css_block', nextEmbedded: 'text/css' }],
  5.   [/<\/style\s*>/, { token: 'keyword', bracket: '@close' }],
  6.   ...
  7. ]

Monaco 看似配置化更简单，实则要理解每个配置属性的含义，一开始学习使用的成本略微有点高。

功能扩展

在编辑器中，我们最常见的功能有智能提示、代码折叠、自动闭合字符(如’’, “”)等。所有这些在 CodeMirror 中都是以 addon 的形式额外载入的，而在 Monaco 都已经内置，只要根据需要进行配置使用即可。下面我们以智能提示为例，来感受下两者的区别。

CodeMirror
  1. import CodeMirror from 'codemirror';
  2. import 'codemirror/mode/sql/sql';
  3. import 'codemirror/lib/codemirror.css';
  4. // 引入智能提示插件
  5. import 'codemirror/addon/hint/show-hint';
  6. import 'codemirror/addon/hint/sql-hint';
  7. import 'codemirror/addon/hint/show-hint.css';
  9. const myCodeMirror = CodeMirror(document.getElementById('root'), {
  10.   value: `-- SQL Mode for CodeMirror
  11. SELECT SQL_NO_CACHE DISTINCT
  12.     @var1 AS \`val1\`, @'val2', @global.'sql_mode',
  13.     1.1 AS \`float_val\`, .14 AS \`another_float\`, 0.09e3 AS \`int_with_esp\`,
  14.     0xFA5 AS \`hex\`, x'fa5' AS \`hex2\`, 0b101 AS \`bin\`, b'101' AS \`bin2\`,
  15.     DATE '1994-01-01' AS \`sql_date\`, { T "1994-01-01" } AS \`odbc_date\`,
  16.     'my string', _utf8'your string', N'her string',
  17.         TRUE, FALSE, UNKNOWN
  18.   FROM DUAL
  19.   -- space needed after '--'
  20.   # 1 line comment
  21.   /* multiline
  22.   comment! */
  23.   LIMIT 1 OFFSET 0;
  24. `,
  25.   mode: 'text/x-sql',
  26.   indentWithTabs: true,
  27.   smartIndent: true,
  28.   lineNumbers: true,
  29.   matchBrackets: true,
  30.   autofocus: true,
  31. });
  33. myCodeMirror.on('change', (cm, changeObj) => {、
  34.   const { origin, text = [] } = changeObj;
  35.   if (origin === '+input' && text[0]) {
  36.     // 执行只能提示
  37.     cm.execCommand('autocomplete');
  38.   }
  40. });

Monaco Editor
  1. monaco.editor.create(document.getElementById("container"), {
  2.     value: `-- SQL Mode for CodeMirror
  3. SELECT SQL_NO_CACHE DISTINCT
  4.     @var1 AS \`val1\`, @'val2', @global.'sql_mode',
  5.     1.1 AS \`float_val\`, .14 AS \`another_float\`, 0.09e3 AS \`int_with_esp\`,
  6.     0xFA5 AS \`hex\`, x'fa5' AS \`hex2\`, 0b101 AS \`bin\`, b'101' AS \`bin2\`,
  7.     DATE '1994-01-01' AS \`sql_date\`, { T "1994-01-01" } AS \`odbc_date\`,
  8.     'my string', _utf8'your string', N'her string',
  9.         TRUE, FALSE, UNKNOWN
  10.   FROM DUAL
  11.   -- space needed after '--'
  12.   # 1 line comment
  13.   /* multiline
  14.   comment! */
  15.   LIMIT 1 OFFSET 0;
  16. `,
  17.     language: "sql"
  18. });
  20. monaco.languages.registerCompletionItemProvider('json', {
  21.   provideCompletionItems: function(model, position) {
  22.     return {
  23.       suggestions: [
  24.         {
  25.           label: '"lodash"',
  26.           kind: monaco.languages.CompletionItemKind.Function,
  27.           documentation: "The Lodash library exported as Node.js modules.",
  28.           insertText: '"lodash": "*"',
  29.           range: range
  30.         },
  31.       ];
  32.     };
  33.   }
  34. });

在这两款编辑器的比较中，没有说哪一款的扩展性更好。但笔者觉得，CodeMirror 的封装更为松散些，开发者可以基于它“随心所欲”的写代码，甚至可以直接修改 mode 或者 addon 的源码；Monaco Editor 的封装就要更加严密，开发者必须要在其定义的框架规则之内进行二次开发。

性能

CodeMirror 核心文件压缩后仅70+KB，而 Monaco Editor 压缩后则有1.9M，所以在初始化时 CodeMirror 的性能略胜一筹。在包文件上有如此大的差异的原因，笔者认为得益于 CodeMirror 的松散封装，无论是功能还是语言的处理都是需要用到什么，引入什么文件来解决的；而 Monaco Editor 的封装更为严密，无论是编辑器的功能扩展还是新增语言，在 Monaco 中都是以配置的形式完成的，这也就意味着配置的解析都是在编辑器内部完成的。

在大文本处理上，Monaco Editor 的表现就更为优异了。笔者将87M多的 SQL 内容(大概有 270 多万行内容)分别拷贝入两个编辑器内，Monaco Editor有卡顿感，但还是能正常解析并进行编辑；但 CodeMirror 就基本处于假死状态了，等了很久都没见渲染出来。通常情况下，我们的文本内容都不会有这么大，对于十几兆的内容CodeMirror处理起来也是毫无压力的。

笔者无意于评价这两款开源编辑器谁更优秀——无疑两者都是非常优秀的。读者大可以根据自己的喜好自由选择其中任何一款进行使用，笔者相信无论是哪一款都可以很好的满足读者的需求。

以上为笔者个人的见解，如有错误，欢迎批评指正！

参考资料：
CodeMirror 帮助文档：https://codemirror.net/
CodeMirror 源码：https://github.com/codemirror/CodeMirror
Monaco Editor帮助文档：https://microsoft.github.io/monaco-editor/index.html