How to get Range from Editor or Highlight Lines?

[rohitasare7]

So basically I want to highlight some lines of code ( for showing code coverage) and I want to use createDecorationsCollection function but here I am facing issue with "new monaco.Range" as I am not able get monaco instance, I am sorry as I am new to VueJs and figuring out things. I just want to make this work. Any help is appreciated.

below is the code I want to fix -->

var decorations = editorRef.createDecorationsCollection([ { range: new monaco.Range(7, 1, 9, 1), // (startLineNumber, startColumn, endLineNumber, endColumn) options: { className: "bg-emerald-500", isWholeLine: true }, }, ]);

[imguolao]

Try the following code:

<template>
    <vue-monaco-editor
      v-model:value="code"
      :options="MONACO_EDITOR_OPTIONS"
      @mount="handleMount"
    />
</tempalte>

<script setup lang="ts">
import { ref, shallowRef } from 'vue' 

const MONACO_EDITOR_OPTIONS = {
  automaticLayout: true,
  formatOnType: true,
  formatOnPaste: true,
}

const code = ref('// some code...')
const editorRef = shallowRef()
const monacoRef = shallowRef()
const handleMount = (editor, monaco) => {
  editorRef.value = editor
  monacoRef.value = monaco

  // your action
  editor.createDecorationsCollection([{
    range: new monaco.Range(0, 1, 0, 10), // (startLineNumber, startColumn, endLineNumber, endColumn)
      options: {
      className: "bg-emerald-500",
       isWholeLine: true 
    },
  }])
}
</script>

[rohitasare7]

Thanks alot @imguolao this is working!