javascript - 如何在 browserify 中要求代码镜像的模式、主题或插件

Question

有没有人尝试通过 browserify 使用代码镜像？

我发现没有任何东西是可见的，即使它已经生成了所有的 html 标签。

代码:

var CodeMirror = require('codemirror');
require('codemirror/mode/javascript/javascript.js');

  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    extraKeys: {
      "Ctrl-Space": "autocomplete"
    },
    mode: {
      name: "javascript",
      globalVars: true
    }
  });

我想知道我应该如何要求 js 模式？

Answer 1

我实际上通过对 html5complete mode demo 的演示的所有依赖项使用 require() 来处理这个问题。像那样:

// require('codemirror/addon/hint/show-hint');
// require('codemirror/addon/hint/xml-hint');
// require('codemirror/addon/hint/html-hint');

require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/css/css');
require('codemirror/mode/htmlmixed/htmlmixed');

var CodeMirror = require('codemirror/lib/codemirror');

var editor = CodeMirror.fromTextArea(textareaElement, {
  mode: 'text/html',
  lineWrapping: true,
  extraKeys: {
    'Ctrl-Space': 'autocomplete'
  },
  lineNumbers: true,
  theme: 'monokai'
});

在我的 .less 文件中，我导入了这样的 CSS:

@import (inline) "./../../node_modules/codemirror/lib/codemirror.css";
@import (inline) "./../../node_modules/codemirror/theme/monokai.css";
// @import (inline) "./../../node_modules/codemirror/addon/hint/show-hint.css";

我并没有真正关心那个把戏的质量。