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

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

Answer 2

这里有什么为我工作的。使用import而不是require，但是相同的要点：

＆＃13;

.example-wrapper{
  background-color:red;
  max-width:100px;
}
.example{
  max-width:100px;
  white-space:normal;
}

＆＃13;

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

2 个答案: