如何使用 monaco 编辑器进行语法高亮显示？

Question

我开发了一个基于代码的聊天组件。每个聊天都是一些代码片段。对于用户输入，我使用monaco-editor。它工作正常。

但是一旦用户点击发送按钮，我就会从摩纳哥编辑器获得原始输入。我需要将此用户输入附加到聊天列表并再次突出显示此输入。

有没有办法可以使用摩纳哥编辑器来做到这一点？或者我必须将highlight.js与 Monaco 一起使用吗？

Answer 1

我遇到了同样的问题，所以我创建了一个问题 #1171：

• https://github.com/Microsoft/monaco-editor/issues/1171

并提供了两种解决方案：

a) 格式化现有的 HTML 元素：

monaco.editor.colorizeElement(document.getElementById("yourElement"));

b) 格式化不属于任何元素的文本。这是一种更通用的方法，它返回一个 Promise：

const code = "source code";
monaco.editor.colorize(code, "javascript")
  .then(html => document.getElementById("yourElement").innerHTML = html);

文档：

• https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#colorize

Answer 2

如果有人仍在搜索，目前 Monaco 编辑器有一个声明性语法荧光笔，称为Monarch