monaco.languages.registerFoldingRangeProvider("SparkSQL", {provideFoldingRanges:function(model) {constranges: monaco.languages.FoldingRange[] = [];for(leti =0; i < model.getLineCount(); ) {constlineContent = model.getLineContent(i +1);constisValidLine= (content: string) => content && !conte...
import { monaco } from 'react-monaco-editor'; monaco.languages.register({id:'语言'}) // @ts-ignore monaco.languages.setMonarchTokensProvider('语言',配置项); 1. 2. 3. 4. 语言的配置项可以参考官方文档 https://microsoft.github.io/monaco-editor/monarch.html ⭐效果 预览地址:https://yongma...
import loader from '@monaco-editor/loader'; loader.config({ 'vs/nls': { availableLanguages: { '*': 'zh-cn' } } }); // availableLanguages中可以配置想要的语言,例如de、zh-cn等 loader.init().then(monaco => { monaco.editor.create(document.querySelector("#mxlContainer"), { value: '<...
首先需要通过monaco.languages.register注册新的语言,其主要参数为: id:新增的语言的key aliases:别名,注册的新语言的别名 extensions:扩展,其他语言的id可以写在这里,会被识别为新的语言,可以用来覆盖原有语言的分词方式 然后通过monaco.languages.setMonarchTokensProvider设置Monarch分词器,其主要参数为: ignoreCase:忽略...
monacoProviderRef.current = monaco.languages.registerCompletionItemProvider(languageName, { 在组件销毁时,将editor和registerCompletionItemProvider生成的对象一同销毁。代码如下: useEffect(() => { // todo // xxxxxx return () => { // 销毁 monacoProviderRef.current?.dispose(); ...
monaco.languages.setMonarchTokensProvider('log',monarchObj); monaco 提供了setMonarchTokensProvider函数来让我定义语言的高亮功能,而monarchObj就是我们所需要填写的 Monarch 所规定的 Json 内容。 Monarch Monarch 由一系列 Json 键值对组成,他有许多属性,其中最重要的就是tokenizer属性,我们描述语法的代码就写在这...
languages: ['json', 'go', 'css', 'html', 'java', 'javascript', 'less', 'markdown', 'mysql', 'php', 'python', 'scss', 'shell', 'redis', 'sql', 'typescript', 'xml'], // ['abap', 'apex', 'azcli', 'bat', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', ...
loader.config({ 'vs/nls': { availableLanguages: { '*': 'zh-cn' } } }); // availableLanguages中可以配置想要的语言,例如de、zh-cn等 loader.init().then(monaco => { monaco.editor.create(document.querySelector("#mxlContainer"), { ...
monaco.languages.register({ id: 'mylang' }); 然后设置语言的Token Provider: monaco.languages.setMonarchTokensProvider('mylang', getlang()); 这样就可以在编辑器中使用这种自定义语言了,下面是完整的代码: @page @model CustomLanguageModel @{ ViewData["Title"] = "自定义语言"; } @ViewData["Title"...
这个库的主要作用是帮我们把monaco-editor和monaco-textmate关联起来,内部首先会加载对应语言的TextMate语法文件,然后调用monaco.languages.setTokensProvider方法来自定义语言的token解析器。 看一下它的使用示例: 代码语言:javascript 复制 import{loadWASM}from'onigasm'import{Registry}from'monaco-textmate'import{wire...