使用vue-codemirror,代码没有高亮显示

Question

<template lang="pug">
  .components
    el-row
      codemirror(v-model="code" :options="defaultOption")

</template>

<script>
  import { codemirror } from 'vue-codemirror'
  import 'codemirror/lib/codemirror.css'
  import 'codemirror/mode/htmlmixed/htmlmixed'
  import 'codemirror/mode/javascript/javascript'
  import 'codemirror/theme/monokai.css'
  export default {
    components: {
      codemirror
    },
    data(){
      return {
        code: '<div>code</div>',
        defaultOption: {
          tabSize: 2,
          styleActiveLine: true,
          mode: 'text/html',
          theme: 'monokai',
          lineNumbers: true,
          line: true,
          addModeClass: false
        }
      }
    },
    created() {
    },
    methods: {
    }
  }
</script>
<style>
</style>

环境信息
cnpm@6.1.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.11.3 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@11.2.0 (/usr/local/bin/node)
npminstall@3.23.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local
linux x64 4.4.0-17134-Microsoft

Answer 1

cm/mode/xml/xml.js,cm/mode/css/css.js 加上就OK了

Answer 2

删除node_modules和package-lock.json重新安装一次就好了

Answer 3

"codemirror/theme/ambiance.css";//主题样式
"codemirror/lib/codemirror.css";//代码编辑器样式
"codemirror/addon/hint/show-hint.css";
我也遇到了这个问题，再加上之后就解决了