Monaco 使用 DocumentHighlightProvider

news2024/9/24 19:20:11

Monaco 中有一个文字高亮的功能,就是选中一个单词,会高亮文字文档中所有出现该单词的位置,效果如下:

在这里插入图片描述
Monaco 默认就有这个功能,可以根据具体需求进行定制。通过 registerDocumentHighlightProvider 进行注册
在这里插入图片描述
实现 provideDocumentHighlights 方法,返回 DocumentHighlight 数组
在这里插入图片描述

代码实现如下, 代码有个 DocumentHighlightKind 枚举类,包括 Text、Read 和 Write,从效果上来看没有啥区别。


export function documentHighlightProvider(editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: typeof monacoEditor){
  return monaco.languages.registerDocumentHighlightProvider("javascript",{
    provideDocumentHighlights: (model, position, token) => {
      const word = model.getWordAtPosition(position);
      if (!word) {
        return [];
      }
      const wordRange = new monaco.Range(
        position.lineNumber,
        word.startColumn,
        position.lineNumber,
        word.endColumn
      );
      const matches: monacoEditor.languages.DocumentHighlight[] = [];
  
      // Search the entire document for the word
      const regex = new RegExp(`\\b${word.word}\\b`, 'g');
      for (let i = 1; i <= model.getLineCount(); i++) {
        const lineText = model.getLineContent(i);
        let match: RegExpExecArray | null;
        while ((match = regex.exec(lineText)) !== null) {
          matches.push({
            range: new monaco.Range(
              i,
              match.index + 1,
              i,
              match.index + 1 + word.word.length
            ),
            kind: monaco.languages.DocumentHighlightKind.Read
          });
        }
      }
  
      return matches;
    }
  })
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1932036.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

无人机之图传距离的决定因素

一、发射功率&#xff1a;图传设备的发射功率越大&#xff0c;信号能够传播的距离就越远 二、工作频段&#xff1a;不同频段具有不同的传播特性&#xff0c;一些频段在相同条件下可能具有更远的传输距离。 三、天线性能&#xff1a;优质的天线可以增强信号的发送和接收能力&a…

9.11和9.9哪个数更大?所有模型测试

目录 通义千问2.5 通义千问2_0.5b kimi 智谱清言 ​编辑讯飞星火 秘塔搜索 文言一心 豆包 腾讯元宝 海螺AI ChatGPT 3.5 Gemini 1.0 通义千问72B Claude-3 天工AI 参赛选手&#xff1a;讯飞星火、文言一心、腾讯元宝、海螺AI、通义千问72B、天工AI、 通义千问2…

实验七:图像的复原处理

一、实验目的 熟悉常见的噪声及其概率密度函数。熟悉在实际应用中比较重要的图像复原技术,会对退化图像进行复原处理。二、实验原理 1. 图像复原技术,说简单点,同图像增强那样,是为了以某种预定义的方式来改进图像。在具体操作过程中用流程图表示,其过程就如下面所示: 2…

git查看历史记录方法

0 Preface/Foreword 1 git reflog git reflog显示所有的操作&#xff0c;不仅仅是commit&#xff0c;也包括git pull&#xff0c;checout等动作。 1.1 查看本地和远程仓库的区别 远程仓库&#xff1a;中间的提交是直接在web端编辑 远程仓库&#xff1a;最新的提交是在本地编…

在golang中Sprintf和Printf 的区别

最近一直在学习golang这个编程语言&#xff0c;我们这里做一个笔记就是 Sprintf和Printf 的区别 fmt.Sprintf 根据格式化参数生成格式化的字符串并返回该字符串。 fmt.Printf 根据格式化参数生成格式化的字符串并写入标准输出。由上面就可以知道&#xff0c;fmt.Sprintf返回的…

爬虫(二)——爬虫的伪装

前言 本文是爬虫系列的第二篇文章&#xff0c;主要讲解关于爬虫的简单伪装&#xff0c;以及如何爬取B站的视频。建议先看完上一篇文章&#xff0c;再来看这一篇文章。要注意的是&#xff0c;本文介绍的方法只能爬取免费视频&#xff0c;会员视频是无法爬取的哦。 爬虫的伪装 …

leetcode-三数之和

视频&#xff1a;https://www.bilibili.com/video/BV1bP411c7oJ/?spm_id_from333.788&vd_sourcedd84879fcf1be72f360461b01ecab0d6 从两数之和开始&#xff0c;排序后的两数之和&#xff0c;利用好升序的性质&#xff0c;可以将时间复杂度从on2降到on; class Solution …

MongoDB常用命令大全,概述、备份恢复

文章目录 一、MongoDB简介二、服务启动停止、连接三、数据库相关四、集合操作五、文档操作六、数据备份与恢复/导入导出数据6.1 mongodump备份数据库6.2 mongorestore还原数据库6.3 mongoexport导出表 或 表中部分字段6.4 mongoimport导入表 或 表中部分字段 七、其他常用命令八…

Qt 4.8.7 + MSVC 中文乱码问题深入分析

此问题很常见&#xff0c;然而网上关于此问题的分析大多不够深刻&#xff0c;甚至有错误&#xff1b;加之Qt5又更改了一些编码策略&#xff0c;而很多文章并未提及版本问题&#xff0c;或是就算提了&#xff0c;读者也不重视。这些因素很容易让读者产生误导。今日我彻底研究透了…

成像光谱遥感技术中的AI革命:ChatGPT

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力&#xff0c;ChatGPT在遥感中的应用&#xff0c;人工智能在…

AI第二课堂第一次笔记

conda的使用 在输入cmd进入终端后&#xff0c;使用命令 conda create -n env_name python3.10 创建环境 命令 conda activate env_name 打开环境&#xff0c;如&#xff1a;使用 conda deactivate退出指令 2.python一些常见操作 python中的文件打开与关闭 调开源的库 p…

spring框架(ioc控制反转 aop面向切面编程)

目录 服务端三层开发&#xff1a; spring框架&#xff08;ioc控制反转 aop面向切面编程&#xff09; 1、Spring框架的优点 什么是事物&#xff1f; 2、Spring的IOC核心技术 什么是ioc&#xff1f; 代码举例&#xff1a;&#xff08;详细流程见笔记&#xff09; **applic…

一些简单的基本知识(与C基本一致)

一、注释 1.单行注释&#xff1a;//&#xff08;快捷键&#xff1a;ctrlshift&#xff1f;&#xff0c;可以选择多行&#xff09; 2.多行注释&#xff1a;/* 文本 */ 二、变量 变量的作用是给一段内存空间起名&#xff0c;方便操作内存中的数据。 通过赋予某数据的…

肯德基蛋挞咖啡?品牌为何热衷于研发“奇葩”新品

想喝蛋挞的风还是吹到了咖啡这里... 是的&#xff0c;它来了&#xff0c;它带着新品走来了。前不久&#xff0c;肯德基旗下的肯悦咖啡推出了一款“蛋挞dirty”&#xff0c;就是把除去蛋挞的芯&#xff0c;留下蛋挞皮皮献给咖啡&#xff0c;成功变成了可以吃的咖啡或者说是可以…

Java面试题--JVM大厂篇之深入解析JVM中的Serial GC:工作原理与代际区别

目录 引言&#xff1a; 正文&#xff1a; 一、Serial GC工作原理 年轻代垃圾回收&#xff08;Minor GC&#xff09;&#xff1a; 老年代垃圾回收&#xff08;Major GC或Full GC&#xff09;&#xff1a; 二、年轻代和老年代的区别 年轻代&#xff08;Young Generation&a…

Java 中的正则表达式

转义字符由反斜杠\x组成&#xff0c;用于实现特殊功能当想取消这些特殊功能时可以在前面加上反斜杠\ 例如在Java中当\出现时是转义字符的一部分&#xff0c;具有特殊意义&#xff0c;前面加一个反斜可以取消其特殊意义&#xff0c;表示1个普通的反斜杠\&#xff0c;\\\\表示2个…

Java从入门到精通(第4版)中文电子版

前言 针对编程语言JAVA相关知识进行了精密的讲解&#xff0c;全册分为28章&#xff0c;含基础知识、核心知识、高级应用3大核心模块&#xff0c;具体细分又包括初识Java&#xff0c;类的高级特性&#xff0c;流程控制&#xff0c;字符串&#xff0c;数组&#xff0c;数据库操作…

团队提效探索:市场上最好的10款项目工单管理工具对比

本文将分享2024年值得关注的10款项目工单管理系统&#xff1a;PingCode、Worktile、蓝凌OA、禅道、泛微E-office、Teambition、monday.com、Basecamp、ProofHub、Wrike。 你是否曾经因为项目进度混乱而感到头疼&#xff0c;或是在处理大量任务时不知所措&#xff1f;在项目管理…

探索编程世界的乐趣:《C++青少年趣味编程108例》

&#x1f482; 个人网站:【 摸鱼游戏】【网址导航】【神级代码资源网站】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

TinyVue v3.17.0 正式发布,推出了一款基于 Quill 2.0 的富文本编辑器,功能强大、开箱即用!

本文由体验技术团队Kagol老师原创~ 我们非常高兴地宣布&#xff0c;2024年6月26日&#xff0c;TinyVue 发布了 v3.17.0 &#x1f389;。 TinyVue 每次大版本发布&#xff0c;都会给大家带来一些实用的新特性&#xff0c;上一个版本我们重构了 chart-core&#xff0c;新增 Circ…