vue-codemirror高亮显示

在Vue项目中使用vue-codemirror可以实现代码高亮显示。具体步骤如下：

1. 安装vue-codemirror和codemirror：

npm install vue-codemirror codemirror --save

2. 在Vue组件中引入vue-codemirror和codemirror：

import VueCodemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/material.css'
import 'codemirror/mode/javascript/javascript.js'

3. 在Vue组件中注册vue-codemirror组件：

export default {
  components: {
    VueCodemirror
  }
}

4. 在Vue组件中使用vue-codemirror组件，并设置相应的属性：

<template>
  <div>
    <vue-codemirror v-model="code" :options="cmOptions"></vue-codemirror>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      cmOptions: {
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
        gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        highlightSelectionMatches: {
          minChars: 2,
          style: 'matchhighlight',
          showToken: true
        }
      }
    }
  }
}
</script>

以上就是使用vue-codemirror实现代码高亮显示的方法。