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> ```