如何使用 monaco 编辑器进行语法高亮显示? [英] How to use monaco editor for syntax highlighting?

问题描述

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

I developing a code based chat component. Every chat is some code snippet. For user input, I am using monaco-editor. It works fine.

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

But as soon as user hits send button, I get raw input from Monaco editor. I need to append this user input to chat list and again highlight this input.

有没有办法可以使用 Monaco 编辑器来做到这一点?还是我必须将 highlight.js 与 Monaco 一起使用?

Is there a way I can use Monaco editor to do this? Or do I have to use highlight.js along with Monaco?

推荐答案

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

I had the same problem so I created an issue #1171:

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

并提供了两种解决方案:

and two solutions were provided:

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

a) Format an existing HTML element:

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

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

b) Format a text which is not part of any element. This is a more generic approach which returns a 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

这篇关于如何使用 monaco 编辑器进行语法高亮显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！