monaco-editor 网页版编辑器 · PHP/Python/前端/Linux 等等学习笔记

[TOC] > [github](https://github.com/microsoft/monaco-editor) ## 概述 Monaco Editor 是一个由 Microsoft 开发的开源代码编辑器。它是 Visual Studio Code 编辑器的核心部分，被设计成一个独立的、可嵌入的编辑器组件，可以轻松地集成到各种应用程序中。Monaco Editor 支持多种编程语言，提供了强大的代码编辑功能，并具有类似于 Visual Studio Code 的用户界面和体验。一些 Monaco Editor 的特点包括： 1. **语法高亮：** 支持多种编程语言的语法高亮，使代码更易读。 2. **智能代码补全：** 提供智能代码补全功能，根据上下文和代码库提示可能的代码片段。 3. **代码导航：** 支持快速导航到定义、查找引用等功能，提高代码阅读和理解效率。 4. **代码折叠：** 允许折叠和展开代码块，以便更好地组织和浏览代码。 5. **错误提示：** 实时检测和提示代码中的错误，帮助开发者提前发现问题。 6. **多光标编辑：** 允许在文本中添加多个光标，方便同时编辑多个位置的代码。 7. **内置终端：** 包含内置终端，允许在编辑器内运行命令。由于其灵活性和强大的功能，Monaco Editor 被广泛应用于各种在线代码编辑器、集成开发环境（IDE）和其他需要代码编辑功能的应用程序。 ## 安装 `npm install monaco-editor` ## 简单使用 ``` <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <div id="container" style="width:800px;height:600px;border:1px solid grey"></div> <script src="node_modules/monaco-editor/min/vs/loader.js" ></script> <script src="node_modules/requirejs/require.js"></script> <script> require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' }}); // vs/editor/editor.main.xxx.js 有多个文件需要导入 require(['vs/editor/editor.main'], function() { var editor = monaco.editor.create(document.getElementById('container'), { value: [ 'function x() {', '\tconsole.log("Hello world!");', '}' ].join('\n'), language: 'javascript' //设置语言 theme:"vs-dark",//'vs' (default), 'vs-dark', 'hc-black' }); }); </script> </body> </html> ```