介紹

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 monaco-editor@0.17.0

---

特性

• 以下語言豐富的智能感知以及驗證功能

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.gitcd monaco-editor-samplesnpm install .npm run simpleserver

---

2、然后訪問http://localhost:8888即可體驗

選擇你想體驗的示例，有一些可能還需要其他的操作，按照提示來即可

---

---

3、項目示例Demo介紹

---

---

• browser-amd-editor:

使用AMD延遲加載在瀏覽器中運行

• browser-script-editor

通過

總結

以上是生活随笔為你收集整理的java在线编辑器_微软开源在线代码编辑器——Monaco Editor的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。