vue3 monaco-editor 高亮指定行

您好，关于您的问题，您可以使用 monaco-editor 官方提供的 `setModelMarkers` 方法，将指定行的样式进行高亮。具体代码实现可以参考以下示例：

<template>
  <div>
    <monaco-editor
      v-model="code"
      :options="editorOptions"
      @mounted="editorInited"
    />
  </div>
</template>

<script>
  import * as monaco from "monaco-editor";
  import "monaco-editor/esm/vs/editor/editor.all.js";

  export default {
    data() {
      return {
        code: "",
        editor: null,
        editorOptions: {
          language: "javascript",
          theme: "vs-dark",
        },
      };
    },

    methods: {
      editorInited(editor) {
        this.editor = editor;

        // 模拟加载文件
        setTimeout(() => {
          this.code = "console.log('hello world!');\nconsole.log('second line');";
        }, 1000);

        // 监听编辑器内容变化，实时更新指定行高亮
        this.editor.onDidChangeModelContent(() => this.highlightLine(1));
      },

      highlightLine(lineNumber) {
        const model = this.editor.getModel();

        // 获取指定行的范围
        const lineRange = model.getLineDecorations(lineNumber, lineNumber)[0].range;

        // 设置指定行的样式
        this.editor.getModel().deltaDecorations(
          [],
          [
            {
              range: lineRange,
              options: {
                isWholeLine: true,
                className: "line-highlight",
              },
            },
          ]
        );
      },
    },
  };
</script>

<style>
  .line-highlight {
    background-color: yellow;
  }
</style>

在 `highlightLine` 方法中，通过获取指定行的范围，并设置样式来实现了高亮指定行的功能。当然，具体的样式可以根据自己的需要进行更改。希望对您有所帮助！