使用 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>