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

Question

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

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

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

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 Editor的声明式语法高亮显示器，名为Monarch