monaco-editor

How to use monaco editor for syntax highlighting?

由 一曲冷凌霜 提交于 2020-08-27 06:42:36
问题 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. Is there a way I can use Monaco editor to do this? Or do I have to use highlight.js along with Monaco? 回答1: I had the same problem so I created an issue #1171: https://github.com/Microsoft/monaco-editor/issues

【软工】[技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE

由 梦想的初衷 提交于 2020-08-12 05:54:14
[技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE 官方文档与重要参考资料 官方demo 官方API调用样例 Playground 官方API Doc ，但其搜索框不支持模糊匹配 官方GitHub Issues ，可搜索相关问题 CSDN优秀博客 带主题颜色选择的demo 依赖与配置 在浏览器中搭建Monaco Editor，推荐使用 ESModule版本+WebPack+npm插件 的形式，比较简单。链接中即为官方给出的部署样例。 需要注意的是，经过笔者踩坑，推荐的node.js包版本为： "dependencies": { "monaco-editor": "=0.19.3", "monaco-editor-webpack-plugin": "=1.9.0", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1", } 其中， monaco-editor <= 0.19.1 时无换行自动缩进， monaco-editor = 0.20.0 时编辑器有概率在网页布局中只占高度5px。因此推荐使用版本0.19.2或0.19.3。对应的， monaco-editor-webpack-plugin 使用版本1.8.2（对应editor的0.19.2）或1.9.0（对应editor的0.19.3+）。

No syntax highlighting with React Monaco Editor

由 血红的双手。 提交于 2020-08-07 05:26:23
问题 Just installed React Monaco Editor and seems to be functioning properly except there is no syntax highlighting. I'm trying to use "python" as the language but the font stays the same gray default colour: Any ideas on how to correct the issue? Here is my Code.js where I'm running the Monaco Editor: import React from "react"; import MonacoEditor from "react-monaco-editor"; class Code extends React.Component { constructor(props) { super(props); this.state = { code: 'print("Hello, World!")' }; }

No syntax highlighting with React Monaco Editor

由 不打扰是莪最后的温柔 提交于 2020-08-07 05:24:27
问题 Just installed React Monaco Editor and seems to be functioning properly except there is no syntax highlighting. I'm trying to use "python" as the language but the font stays the same gray default colour: Any ideas on how to correct the issue? Here is my Code.js where I'm running the Monaco Editor: import React from "react"; import MonacoEditor from "react-monaco-editor"; class Code extends React.Component { constructor(props) { super(props); this.state = { code: 'print("Hello, World!")' }; }

vue（element）中使用monaco实现代码高亮

由 三世轮回 提交于 2020-04-19 17:45:21
vue（element）中使用monaco实现代码高亮 使用的是vue语言，用element的组件，要做一个在线编辑代码，要求输入代码内容，可以进行高亮展示，可以切换各不同语言，而且支持关键字补全，还要有一个各不同版本间的代码左右比较，这就是需求。 至于为什么选中monaco，请查看 vue（element） 中代码高亮插件全面对比 好了，现在正式开工吧！ 首先需要下载monaco-editor组件，monaco-editor-webpack-plugin组件 npm install monaco-editor npm install monaco-editor-webpack-plugin 当然啦，npm下载很是缓慢，换个国内镜像，淘宝的吧。果然，速度就嗖嗖的起来。 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install cnpm install monaco-editor cnpm install monaco-editor-webpack-plugin 可在node_modules下看到其目录结构 核心代码如下所示 首先写个组件，供其他页面引入调用， CodeEditor.vue <template> <div class="code-container" ref=

Monaco Editor custom formatters

由 故事扮演 提交于 2020-02-24 05:16:09
问题 I am trying to use the Monaco Editor by Microsoft in a project I am currently developing. I have looked through the documentation and see that you can setup a custom language with custom code completion and syntax highlighting, but I cannot find any information on how we can add custom formatting to the custom language as well. Is this a possibility? 回答1: Read the docs: registerDocumentFormattingEditProvider You must create a new DocumentFormattingEditProvider and then pass it to monaco

How do I format JSON code in Monaco Editor with API?

由 孤人 提交于 2020-02-07 02:02:07
问题 I am working with monaco editor aka the VS Code engine in a web project. I am using it to allow users to edit some JSON that has a JSON Schema set, to help give some auto-completion. When they save their changes and wish to re-edit their work, the JSON that I load back into the editor is converted to a string but this renders the code out on a single line and I would much prefer the JSON to be prettier as if the user right clicks and uses the Format Document command from the context menu or

how to use vscode CompletionItemProvider by keybinding

由 邮差的信 提交于 2020-02-07 02:00:12
问题 I tried to write an extension to vscode to help me import lib by keyboard shortcuts I've tried many things, but two questions remain unanswered 1.How to use CompletionItemProvider by shortcut key Normally, CompletionItemProvider is triggered by a character,But I want to be able to use the shortcut to bind commands.Ideally, I could press the shortcut to display the CompletionItems directly.But the only thing I know so far is through vscode.com command.excute('trugger suggest'), which can be

how to use vscode CompletionItemProvider by keybinding

由 一世执手 提交于 2020-02-07 01:59:07
问题 I tried to write an extension to vscode to help me import lib by keyboard shortcuts I've tried many things, but two questions remain unanswered 1.How to use CompletionItemProvider by shortcut key Normally, CompletionItemProvider is triggered by a character,But I want to be able to use the shortcut to bind commands.Ideally, I could press the shortcut to display the CompletionItems directly.But the only thing I know so far is through vscode.com command.excute('trugger suggest'), which can be
订阅 monaco-editor