微软开源线上程式码编辑器——Monaco Editor
介绍
Monaco Editor是为VS Code提供支援的程式码编辑器，执行在浏览器环境中。编辑器提供程式码提示，智慧建议等功能。供开发人员远端更方便的编写程式码。移动浏览器或移动Web框架不支援Monaco编辑器。简单的理解就是VSCode中的程式码编辑器和Monaco Editor使用的很多相同的核心模组，你可以将Monaco Editor用到自己的专案中，作为云端编辑器的支援，支援IE 11，Edge，Chrome，Firefox，Safari和Opera！
相关地址
Github：https://github.com/microsoft/monaco-editor
文件和示例等：
https://microsoft.github.io/monaco-editor/
安装
安装没什么好说的，你可以到上面地址中下载，也可以直接使用npm安装npm install [email protected]
特性
以下语言丰富的智慧感知以及验证功能TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML
多数语言支援的语法着色（高亮）支援XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C……
程式码差异比较内联程式码差异比较
非内联程式码差异比较
内建三种主题（用过VSCode都知道）上面都是原生Visual Studio亮色主题
Visual Studio Dark主题：
高对比度暗色主题：
快速开始
想要直接开发可能不是一件非常简单的事情，所以给出官网提供的所有示例，建议感兴趣的同学可以直接下载下来检视相关示例程式码https://github.com/Microsoft/monaco-editor-samples/
1、在终端执行以下四条命令，前提是你已存在git和node的环境，如果不存在则先安装git或者node
git clone https://github.com/Microsoft/monaco-editor-samples.git
cd monaco-editor-samples
npm install .
npm run simpleserver
2、然后访问http://localhost:8888即可体验
选择你想体验的示例，有一些可能还需要其他的操作，按照提示来即可
3、专案示例Demo介绍
browser-amd-editor:使用AMD延迟载入在浏览器中执行
browser-script-editor通过标签使用AMD同步载入在浏览器中执行
browser-esm-webpack使用webpack在浏览器中执行
browser-esm-webpack-small使用webpack在浏览器中执行（仅限编辑器的一个子集）
electron-amd在electron执行
nwjs-amd在nwjs中执行。v2初始版本没有
其他示例和用法
browser-amd-diff-editor在浏览器中执行程式码差异比较编辑器
browser-amd-iframe在
browser-amd-localized本土化执行
browser-amd-monarch使用Monarch编写的自定义语言语法执行
browser-amd-shared-model在两个编辑器中使用相同的文字模型
想要深入学习的小伙伴可以直接到官网上手学习，左边是配置，右边即可看到效果，这样的话学习起来会比较的快
相关连结
以下版本可能无法跟进最新的版本React版本：
https://github.com/react-monaco-editor/react-monaco-editor
Vue版本：
https://github.com/matt-oconnell/vue-monaco-editor
Angular版本：
https://github.com/materiahq/ngx-monaco-editor
总结
Monaco Editor不得的不说是一个非常强大的线上程式码编辑器，可以为自己的专案提供云端程式码编辑器的基础技术支援，可以在其基础上扩充套件很多强大的功能，当然上手不一定简单，需要根据自己的需求确定开发方案，有需求的小伙伴可以去研究一下！
