js 实现内容输入框内文字高亮

Question

本人使用的是vue2工程，近期有一个功能，在前端编辑json配置文件，要求将json关键字进行高亮，以增加其可读性，请问有组件可以实现吗，举例，以下是idea高亮json的效果。

Answer 1

<template>
  <div>
    <p>vue-json-editor</p>
    <vue-json-editor v-model="json" :show-btns="true" :expandedOnStart="true" mode="code"
                     @json-change="onJsonChange"></vue-json-editor>
  </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'

export default {
  data() {
    return {
      json: {
        msg: 'demo of jsoneditor'
      }
    }
  },

  components: {
    vueJsonEditor
  },

  methods: {
    onJsonChange(value) {
      console.log('value:', value)
    }
  }
}
</script>
<style>
.ace_variable {
  color: red !important;
}
</style>