Monaco 使用 ColorProvider

hawk2014bj

于 2024-07-12 17:30:27 发布

阅读量287

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Monaco Editor 使用文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/hawk2014bj/article/details/140384265

Monaco Editor 使用专栏收录该内容

26 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

Manco 中可以使用调色板对色值进行修改，首先看一下调色版效果。

在这里插入图片描述
调色板是 Monaco-Editor 中一个特别的组件，通过两个方法实现呼出调色板，provideColorPresentations 显示调色窗口，provideDocumentColors 监听页面的变更，如果是色值（根据正则去判断）就在字符串前添加颜色块。

实现代码如下


export function colorProvider(editor, monaco){
    return monaco.languages.registerColorProvider('javascript',{
        provideDocumentColors: function (model, token) {
          const colors = [];
          const lines = model.getLinesContent();

          for (let lineNumber = 1; lineNumber <= lines.length; lineNumber++) {
            const lineContent = lines[lineNumber - 1];