CodeMirror---實現關鍵詞高亮

這周前端vue項目有一小需求，需要實現在文本框中輸入不同編程語言代碼塊並且讓關鍵詞高亮顯示。

經過調研決定使用vue-codemirror和codemirror；

原因如下：

• vue-codemirror是基於codemirror，適用於 Vue 的 Web 代碼編輯器；
• 但是導入vue-codemirror后並沒有發現codemirror的核心css以及使用的語言語法定義文件，如下圖；

實現過程如下：

1.導入插件

//導入codemirror 插件
npm install codemirror --save

//導入vue-codemirror 插件
npm install vue-codemirror --save　　

 2.全局掛載

3.在需要使用該插件的組件中掛載

<template>
    <codemirror v-model="code" :options="cmOptions" class="code"></codemirror>
</template>
<script>
//導入組件
import { codemirror } from "vue-codemirror";
//導入使用的語言語法定義文件
require("codemirror/mode/python/python.js");
require("codemirror/mode/javascript/javascript.js");
require("codemirror/mode/clike/clike.js");
require("codemirror/mode/shell/shell.js");
//導入選中的theme文件
require("codemirror/theme/blackboard.css");
//導入自動提示核心文件及樣式
require("codemirror/addon/hint/show-hint.css");
require("codemirror/addon/hint/show-hint.js");
//導入指定語言的提示文件
require("codemirror/addon/hint/javascript-hint.js");
export default {
   //注冊組件 
  components: {
    codemirror
  },
  data() {
    return {
      //編輯器的默認輸入值
      code: "var a=1\nlet b=2",
      cmOptions: {
        tabSize: 4,
        mode: "text/javascript", //識別的語言javascript
        // mode:"text/x-java",  //識別的語言java
        // mode:"text/x-sh",   //識別的語言shell腳本
        theme: "blackboard",  //編輯器的主題
        lineNumbers: true,   //顯示行號
        line: true
      }
    };
  }
</script>

4.實現的效果

 

附：主題預覽