如何在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

我实际上通过使用require()来演示html5complete模式演示的所有依赖关系来解决这个问题:

// 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";

我并没有真正关心这个技巧的质量.