Current location - Training Enrollment Network - Books and materials - Microsoft Open Source Online Code Editor-Monaco Editor
Microsoft Open Source Online Code Editor-Monaco Editor
Monaco Editor is a code editor that supports VS code and runs in a browser environment. The editor provides code hints, intelligent suggestions and other functions. It is more convenient for developers to write code remotely. The Monaco editor is not supported by mobile browsers or mobile Web frameworks. The simple understanding is that the code editors in VSCode and Monaco Editor use many of the same core modules. You can use Monaco editor as the support of cloud editor in your own project, supporting IE 1 1, Edge, Chrome, Firefox, Safari, Opera!

Github:

Documents and examples, etc. :

There is nothing to say about the installation. You can download it from the above address or install it directly with npm.

Type scripts, 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……

Comparison of inline code differences

Non-inline code difference comparison

All of the above are native Visual Studio bright color themes.

Visual Studio dark theme:

High contrast dark theme:

Direct development may not be a very simple matter, so all the examples provided by official website are given. It is suggested that interested students can download and view the relevant sample codes directly.

1. Execute the following four commands at the terminal, provided that the environment of git and node is already available. If not, install git or node first.

2. Then visit http://localhost:8888 to experience it.

Choose the example you want to experience. Some of them may need other operations. Just follow the prompts.

3. Presentation and introduction of project examples

Other examples and usage

Little friends who want to study deeply can go directly to official website to study. On the left is the configuration, and the effect can be seen on the right, so that learning will be faster.

The following versions may not keep up with the latest version.

React version:

Vue version:

Angular version:

Monaco Editor has to be said to be a very powerful online code editor, which can provide the basic technical support of cloud code editor for its own projects and expand many powerful functions based on it. Of course, it is not necessarily easy to get started, and it is necessary to determine the development plan according to your own needs. Partners in need can study it!