标签存档: Monaco Editor

Monaco Editor 实战:添加代码折叠功能

在之前的文章《4 步为 Monaco Editor 添加自定义语言支持》中,我们已经学会了如何使用 monaco-editor 来实现一个支持自定义编程语言的编辑器,但是作为一个标准的代码编辑器,我们还需要它支持代码块折叠功能,这样在编辑内容比较多的代码文件时,可以方便的将其中一些代码块折叠起来,使得在阅读代码时更容易理解整体代码结构。

这一次我们就来看看如何给 Monaco Editor 增加代码块折叠功能。

官方示例

在 Monaco Editor Playground 的 Folding Provider Example 示例中,可以看到如何给一个自定义语言添加代码折叠支持:

monaco.languages.registerFoldingRangeProvider("foldLanguage", {
    provideFoldingRanges: function (model, context, token) {
        return [
            // comment1
            {
                start: 5,
                end: 7,
                kind: monaco.languages.FoldingRangeKind.Comment,
            },
      // ...
    ]
  }
});

可以看到,只需要在注册自定义语言后,再注册一个 foldingRangeProvider …

阅读全文 »