runCode() { var html = this.$refs.html.monacoEditor.getValue(); var css = this.$refs.css.monacoEditor.getValue(); var js = this.$refs.js.monacoEditor.getValue(); let code = `<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="I...
微软之前有个项目叫做 Monaco Workbench,后来这个项目变成了VSCode,而 Monaco Editor 就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码(monaco-editor-core)都是共用的,所以monaco和VSCode在编辑代码,交互以及UI上几乎是一摸一样的,有点不同的是,两者的平台不一样,monaco基于浏览器,而VSCode基于electron...
笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持在浏览器中运行,但是功能基本是和VSCode一样强大的,所以在笔者看来Monaco Editor等于VSCode的编辑器核心。 另外笔者是一个颜控,不管做什么项目,都热...
笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持在浏览器中运行,但是功能基本是和VSCode一样强大的,所以在笔者看来Monaco Editor等于VSCode的编辑器核心。 另外笔者是一个颜控,不管做什么项目,都热...
笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持在浏览器中运行,但是功能基本是和VSCode一样强大的,所以在笔者看来Monaco Editor等于VSCode的编辑器核心。
run: function () { // sql代码格式化 monacoEditor.setValue(format(monacoEditor.getValue())); } }); 自定义主题 functiondefineTheme(){monaco.editor.defineTheme('naruto',{base:'vs',// 以哪个默认主题为基础:"vs" | "vs-dark" | "hc-black" | "hc-light"inherit:true,rules:[// 高亮规则,...
monaco-editor:是网页编辑器的核心包,整体非常大,因为支持了很多的语言与很多的扩展功能。 monaco-editor-webpack-plugin:因为monaco-editor直接单独引入的情况下所支持的基本使用不能满足我们的需求,我们还需要支持智能提示等功能,所以需要额外单独做一些配置操作,虽然官网文档说明已经很清晰,但是配置起来还是不免比较繁琐...
PS:贴个Monaco Editor官方文档地址:https://microsoft.github.io/monaco-editor/ 一、安装 基础的安装只需要两个: npm install monaco-editor -S npm install monaco-editor-webpack-plugin -D 作为扩展汉化,也可以继续安装另外三个:
本文说的是如何通过monaco-editor实现一个类似于codepen一样的在线代码测试工具。 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(下文简称monaco)就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码(monaco-editor-core)都是共用的,所以monaco和VSCode在编辑代码,交互以及UI...
Monaco Editor 是微软开源的基于 VS Code 的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。 展开 收起 暂无标签 https://www.oschina.net/p/monaco-editor HTML/CSS 等4 种语言 MIT 保存更改 取消 发行版 暂无发行版 monaco-editor 开源评估...