所有分类
  • 所有分类
  • 实时新闻

微软开源在线代码编辑器——MonacoEditor

介绍

monaco editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。移动浏览器或移动Web框架不支持Monaco编辑器。简单的理解就是VSCode中的代码编辑器和Monaco Editor使用的很多相同的核心模块,你可以将Monaco Editor用到自己的项目中,作为云端编辑器的支持,支持IE 11,Edge,Chrome,Firefox,Safari和Opera!


微软开源在线代码编辑器——MonacoEditor

相关地址

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


微软开源在线代码编辑器——MonacoEditor

  • 多数语言支持的语法着色(高亮)支持

XML, PHP, C, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F, Lua, Powershell, Python, Ruby, SASS, R, Objective-C……


微软开源在线代码编辑器——MonacoEditor

  • 代码差异比较

内联代码差异比较


微软开源在线代码编辑器——MonacoEditor

非内联代码差异比较


微软开源在线代码编辑器——MonacoEditor

  • 内置三种主题(用过VSCode都知道)

上面都是原生Visual Studio亮色主题

Visual Studio Dark主题:


微软开源在线代码编辑器——MonacoEditor

高对比度暗色主题:


微软开源在线代码编辑器——MonacoEditor

快速开始

想要直接开发可能不是一件非常简单的事情,所以给出官网提供的所有示例,建议感兴趣的同学可以直接下载下来查看相关示例代码

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即可体验

选择你想体验的示例,有一些可能还需要其他的操作,按照提示来即可


微软开源在线代码编辑器——MonacoEditor

3、项目示例Demo介绍


微软开源在线代码编辑器——MonacoEditor

  • browser-amd-editor:

使用AMD延迟加载在浏览器中运行

  • browser-script-editor

通过

原文链接:https://www.w1ym.com/83239/,转载请注明出处~~~
0

评论0

请先

站点公告

【温馨提示】 本站不建议您对本站支付任何费用或开通任何会员本站99%资源为免费资源只提供共享不提供技术支持,本站资源主要以学习开发为主,本站是为个人资源记录学习研究等情况而建立,如特殊原因下载,需在24小时删除相关资源。本站资源均来自互联网收集或网友分享,若有侵权,请联系站长删除,谢谢。立即查看
显示验证码
没有账号?注册  忘记密码?