monaco是一款可以直接高亮输入框内容的npm插件,下面是在vue3+vite使用教程

1.安装

pnpm install monaco-editor

2.使用
先在用到的vue文件引入

import * as monaco from 'monaco-editor';

然后div设置一个id

    <div id="container" class="line_wenben">

        </div>

最后在onMounted函数把插件挂载到对应id上,顺便输些配置参数就行
value对应绑定的变量.

let editor: monaco.editor.IStandaloneCodeEditor;
onMounted(()=>{
    editor = monaco.editor.create(document.getElementById('container')!, {
    value: pageData.txt_content,
    language: 'sql',
   automaticLayout: true,
    minimap: { enabled: false }
  });

  // 监听编辑器内容变化
  editor.onDidChangeModelContent(() => {
    pageData.txt_content = editor.getValue();
  });
})

非vue专用插件,修改的话需要手动更新才行

const test = () => {
  pageData.txt_content = "asdasdw";
  editor.setValue(pageData.txt_content); // 手动更新编辑器内容
  console.log(123);
};

3.补充
monaco配置参数官方文档
可以借助AI帮你查找具体功能对应的配置参数