我正在尝试在Monaco编辑器上设置自定义主题,但是当我更改要创建的自定义主题(基于现有主题)的颜色时,更改不会应用。我使用了setTheme来应用主题,但每次这样做时,都会出现一个错误,指出setTheme不是一个函数。
我使用了playground上反映的代码使其正常工作,是否有相关问题?如何解决?我的版本目前是10.01。
我使用了playground上反映的代码使其正常工作,是否有相关问题?如何解决?我的版本目前是10.01。
我曾经遇到过同样的问题,但最终成功解决了。
我使用以下选项初始化了我的 Monaco 编辑器:
editor = monaco.editor.create(document.getElementById("text-log-container"), {
language: "javascript",
value: editorData,
scrollbar: {
vertical: 'auto',
horizontal: 'auto'
},
theme: "vs-dark",
automaticLayout: true,
readOnly: true
});
然后在函数或立即窗口中执行以下操作:
monaco.editor.setTheme('vs')
如果目标是动态更新现有主题,那么实际上只需“重新定义”该主题即可:
monaco.editor.defineTheme('myCoolTheme', {...})
接下来,Monaco将更新主题定义。如果该主题已经是编辑器的活动主题,则还将直接将新的主题设置应用于编辑器。
另请参见https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#definetheme
好的,我遇到了同样的问题,并找到了正确的答案,就像@mhuss所说的那样。
但是在他整个答案中...真正的问题细节是关键。仔细看。它是:
monaco.editor.setTheme('vs');
。重点在于monaco!
一开始我尝试了以下方法,因为这对我来说确实是有意义的:
var myEditor = monaco.editor.create( ... blah blah ...);
...
myEditor.setTheme('vs-dark');
我尝试更新实例,但似乎主题是全局设置的。
yourMonacoEditorInstance._themeService.setTheme("your-theme-name")
例如:
const editor = monaco.editor.create({
language: 'javascript',
value: 'console.log("hello world")'
});
editor._themeService.setTheme("your-theme-name");
在创建时使用默认主题之一,请使用:
this.editor = monaco.editor.create(myRef, {
language: languageId,
minimap: { enabled: false },
autoIndent: 'none',
automaticLayout: true,
theme: 'vs-dark' // this, this line here! (other default options are: 'vs' and 'hc-black')
});
如果您确实需要像我一样设置3秒超时以查看主题更改,则可以在事后设置主题,方法如下:
this.editor = monaco.editor.create(myRef, {
language: languageId,
minimap: { enabled: false },
autoIndent: 'none',
automaticLayout: true // note the lack of theme property in the call to create
});
setTimeout(() => {
monaco.editor.setTheme('vs-dark');
}, 2999); // because 3 seconds turned out to be too long for me :p
您也可以同时进行 -- 从深色开始,再转向浅色:
this.editor = monaco.editor.create(myRef, {
language: languageId,
minimap: { enabled: false },
autoIndent: 'none',
automaticLayout: true,
theme: 'vs-dark'
});
setTimeout(() => {
monaco.editor.setTheme('vs');
}, 2998);