首页 > 其他分享 >monaco editor自定义代码解析和代码高亮颜色配置

monaco editor自定义代码解析和代码高亮颜色配置

时间:2023-11-21 16:22:41浏览次数:37  
标签:comment foreground 自定义 代码 token editor 解析 true

//目前使用到的关于解析配置
export const language = {
  // 是否区分大小写,true区分
  ignoreCase:false,
  // 关键字 
  keywords: ['aaa','bbb'],
  // 类型关键字
  typeKeywords: [],
  // 代码解析配置格式为[正则表达式,对应的类型如(string,number,comment)]
  tokenizer: {
      // 解析的主入口,用于关联正则表达式和解析类型
    root: [
      [/real|discrete Real|Integer|Boolean|String|reinit/,'namespace'],
      // 关键字的匹配
      [/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'keyword',
                                   '@keywords': 'keyword',
                                   '@default': 'identifier' } }],
      // [/[A-Z][\w\$]*/, 'type.identifier' ],  // 高亮首字母大写的class
      // 注释
      // 可以理解为[正则表达式,匹配类型如(string,comment,namespace等),命名空间(可以理解为class)]
      // 以注释为例以下配置表示为检索到"后开始标识为注释,按照comment去配置
      [/"/, 'comment', '@comment'],
      // 可以同时对comment设置多组配置,用‘@类名’区分
      [/\/\*/, 'comment', '@commentT'],
      // include表示将@numbers的解析应用
      { include: '@numbers' }
    ],
    // 用于对应上方
    comment:[
      // 表示匹配到"后停止验证
      [/"/,'comment','@pop'],
      // escape表示在当前验证模式下忽略/\\"/匹配项
      [/\\"/,'comment.escape'],
      // content表示在这个验证模式下内容应该是那些/./表示所有包含换行,空格等字符
      [/./, 'comment.content']
      // 还有诸如@push等方法还没试
    ],
    commentT:[
      [/\*\//,'comment','@pop'],
      // 如需配置行注释则添加换行符等验证
      [/./, 'comment.content']
    ],
    // 对应{include:'@numbers'}
    numbers: [
      [/-?0x([abcdef]|[ABCDEF]|\d)+[lL]?/, 'number.hex'],
      [/-?(\d*\.)?\d+([eE][+\-]?\d+)?[jJ]?[lL]?/, 'number']
    ]
  }
};

// 颜色配置
monaco.editor.defineTheme('myTheme', { base: 'vs', rules: [ // 设置token颜色, { token: 'keyword', foreground: '#0000FF', fontStyle: 'bold' }, { token: 'number', foreground: '#FF6600', fontStyle: 'bold' }, { token: 'comment', foreground: '#999999' }, { token: 'namespace', foreground: '#FF0000' }, { token: 'variable', foreground: '#006699' } ], inherit: true, // 必须有否则无法生效 colors: {} }); monaco.editor.setTheme('myTheme'); public editorOptions = { value: this.modelCode, //和自己定义的名称对应 theme: 'myTheme', glyphMargin: true, language: 'modelica', automaticLayout: true, bracketPairColorization: true, lightbulb: { enabled: true }, minimap: { enabled: false }, folding: true, readOnly: false, domReadOnly: false }; monaco.editor.create( document.querySelector('#editor'), this.editorOptions );

  

标签:comment,foreground,自定义,代码,token,editor,解析,true
From: https://www.cnblogs.com/nicelife/p/17846857.html

相关文章

  • 数学建模之插值法及代码
    发现更多知识,欢迎访问Cr不是铬的个人网站引言数模比赛中,常常需要根据已知的函数点进行数据、模型的处理和分析,而有时候现有的数据是极少的,不足以支撑分析的进行,这时就需要使用一些数学的方法,“模拟产生”一些新的但又比较靠谱的值来满足需求,这就是插值的作用。插值法的定义......
  • NOJ 六数码问题(代码+详解)
    描述现有一两行三列的表格如下:ABCDEF把1、2、3、4、5、6六个数字分别填入A、B、C、D、E、F格子中,每个格子一个数字且各不相同。每种不同的填法称为一种布局。如下:135246布局1256431布局2定义α变换如下:把A格中的数字放入B格,把B格中的数字放入E格,把E格中的......
  • 零代码编程:用ChatGPT根据视频标题来批量重命名字幕文件
    现在有很多视频文件:还有视频相对应的字幕文件:F:\儿童学习教育\Abadas.适合2岁以上.BBC儿童学习单词的动画\abadas字幕两者的文件标题不一样,现在要将字幕文件的标题全部根据视频文件来重命名。在chatGPT中输入提示词:你是一个Python编程专家,要完成一个根据视频标题来批量重命名字幕文......
  • 微信附近人wxid采集工具,可通过QQ附近人提取转换,易语言版接口代码
    这个调用的是一个POST接口,我用fiddler抓取的,并非是逆向或者是破解奥,是正常公开的接口,我只是对数据对了一些编码转换和整理,可以提取附近人的数据包,然后通过数据包可以直接加微信,就这么简单,但是还是存在一些技术原理,ck是我自己账号的我就不提供了。框架设计界面: 数据包可以直接......
  • qq附近人提取脚本插件,微信wxid附近人提取接口工具,易语言代码分享,POST方式学习教程
    其实打开Qq附近人后它会返回一个数据包我们只需要把这个数据包提取解析出来就可以提取对方的wxid或者是QQ号,通过这个WXID还能直接加好友,而且是免费的接口,我今天把基础源码和案例图发给大家,免费分享,没有HOOK也没有逆向,就抓包实现的,正常逻辑哈,并非是违规开发。框架图:  转换后......
  • Django自定义接口
    一、在有默认(create、list、retrieve、update、destroy)接口时自定义接口classIterationsViewSet(MyModelViewSet):queryset=uc_iterations.objects.all().order_by('id')serializer_class=IterationsSerializerpagination_class=DIYPagination#配置自定......
  • 若干代码审查
    设置静态代码分析器你只需要做一次,但它会消除代码审查中最单调的部分。您应该定期重新审视这些规则,以防止随着时间的推移而过时。代码分析器应该破坏您的CI管道,以维护对要合并的任何更改的零警告策略。 检查代码上下文程序员经常做的事情(包括我自己)只是快速浏览一下代码审查工具......
  • 【气动学】基于龙格库塔是实现可变初始角度、速度、空气阻力下的水平风弹道轨迹仿真附
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,代码获取、论文复现及科研仿真合作可私信。......
  • 生产者-消费者代码实现
    #include<pthread.h>#include<errno.h>#include<list>#include<iostream>#include<semaphore.h>#include<unistd.h>classTask{public:Task(inttaskID){this->taskID=taskID;}voiddoT......
  • 【HarmonyOS】低代码平台组件拖拽使用技巧之页签容器
    ​【关键字】HarmonyOS、低代码平台、Tabs、TabContent、页签导航 1、写在前面前面几篇分别介绍了低代码平台中的堆叠容器、滚动容器、网格布局等三种容器的使用,实际开发中我们经常会有这样的需求,页面底部是三个Tab按钮点击时会分别切换不同的视图内容,本篇我们就来介绍低代码......