介绍
Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。移动浏览器或移动Web框架不支持Monaco编辑器。简单的理解就是VSCode中的代码编辑器和Monaco Editor使用的很多相同的核心模块,你可以将Monaco Editor用到自己的项目中,作为云端编辑器的支持,支持IE 11,Edge,Chrome,Firefox,Safari和Opera!
![c201b2e8c2b8ac296dc2acb107053c7a.png](https://i-blog.csdnimg.cn/blog_migrate/304ebe27c279a304ba4769ed684b102e.jpeg)
相关地址
Github:
https://github.com/microsoft/monaco-editor
文档和示例等:
https://microsoft.github.io/monaco-editor/
安装
安装没什么好说的,你可以到上面地址中下载,也可以直接使用npm安装
npm install monaco-editor@0.17.0
特性
- 以下语言丰富的智能感知以及验证功能
TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML
![a9cd7471e4b2c73cdeab113fcd379b26.png](https://i-blog.csdnimg.cn/blog_migrate/3c03cd591ede619a7df374c56242204e.jpeg)
- 多数语言支持的语法着色(高亮)支持
XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C……
![ecf67ef145c78bb327edbe6942fbbd70.png](https://i-blog.csdnimg.cn/blog_migrate/8922f096d500a099471dfd9795686c88.jpeg)
- 代码差异比较
内联代码差异比较
![28c498312013a89789970cbbe87efbc6.png](https://i-blog.csdnimg.cn/blog_migrate/dee0f3e3137d84f7a7185893a3d5e87d.jpeg)
非内联代码差异比较
![d948ebea5e17fd1732ccf3496ca0072e.png](https://i-blog.csdnimg.cn/blog_migrate/d4579787a40c84f16666d7e24dc34d43.jpeg)
- 内置三种主题(用过VSCode都知道)
上面都是原生Visual Studio亮色主题
Visual Studio Dark主题:
![61165f26684a549af92878cf4c9dd5b0.png](https://i-blog.csdnimg.cn/blog_migrate/6b05d66fa8f7f1c22dffb33ec0fb7b0d.jpeg)
高对比度暗色主题:
![7afe57e9f6512befa2b6b509c60815b6.png](https://i-blog.csdnimg.cn/blog_migrate/15d32357db3578457dddab660058f5ea.jpeg)
快速开始
想要直接开发可能不是一件非常简单的事情,所以给出官网提供的所有示例,建议感兴趣的同学可以直接下载下来查看相关示例代码
https://github.com/Microsoft/monaco-editor-samples/
1、在终端执行以下四条命令,前提是你已存在git和node的环境,如果不存在则先安装git或者node
git clone https://github.com/Microsoft/monaco-editor-samples.gitcd monaco-editor-samplesnpm install .npm run simpleserver
2、然后访问http://localhost:8888即可体验
选择你想体验的示例,有一些可能还需要其他的操作,按照提示来即可
![6cf699848a560c5b7c75d8cbdfba470b.png](https://i-blog.csdnimg.cn/blog_migrate/d341e4944e5d65d1b25634443d64093e.jpeg)
3、项目示例Demo介绍
![374cb444c31ef44f7cbdf8001d0e44ca.png](https://i-blog.csdnimg.cn/blog_migrate/8e0f8df3029037f3e8b99dc83dd84663.jpeg)
- browser-amd-editor:
使用AMD延迟加载在浏览器中运行
- browser-script-editor
通过