monaco editor 高亮碰到的问题

使用  monaco editor 做一个简单的指定字符高亮功能：

<template>

  <div id="container" :style="{ zIndex, width }">

  </div>

</template>

<script>

export default {

mounted() { 
    this.$nextTick(() => this.init()}
}, 
methods: { 
    init() {
         const muri = monaco.Uri.parse('file', + 'rance/abl.c')   
         let model = monaco.editor.getModel(muri)  
         if(!model){ 
            model = monaco.editor.createModel(this.value, 'cpp', muri)
         }
            this.editor = monaco.editor.create(this.$refs.editor, 
            { 
                value: this.value,
                theme: 'vs', 
                language: 'c' , 
                automoaticLayout: true, 
                readOnly: true, 
                mimimap: { enabled: false}
            }  
            this.update()
        }, 
        update() {
            const model = this.editor.getModel()
             model.deltaDecorations(this.model, [])
               if(model) { 
                let matches = model.findMoatches('int', true, false, true) 
                this.decorations = matches.map((match) => (
                    {
                     range: new monaco.Range(match.range.startLineNumber, match.range.startColumn, match.range.endLineNumber,match.range.endColumn), 
                     options: { isWholeLine: false, className: 'high'}
                    })) 
                    this.model = model.deltaDecorations([], this.decorations)
               }
        }
}

};

</script>

<style scoped>

这里一定要注意类名权重，不加入可能会使用官方自带高亮类名样式背景，再次刷新界面会使得代码不渲染高亮背景色，.high不生效。

#containr .high {

background: red;

}

</style>