程序员经验分享-hwhale

在线代码编辑器：Monaco Editor

2023-11-05

monaco editor是微软开源的一款web版代码编辑器。它支持智能提示，代码高亮，代码格式化。

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.git
cd monaco-editor-samples
npm install .
npm run simpleserver

2、然后访问http://localhost:8888即可体验

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

 

3、项目示例Demo介绍

  • browser-amd-editor:

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

  • browser-script-editor

通过<script>标签使用AMD同步加载在浏览器中运行

  • browser-esm-webpack

使用webpack在浏览器中运行

  • browser-esm-webpack-small

使用webpack在浏览器中运行（仅限编辑器的一个子集）

  • electron-amd

在electron运行

  • nwjs-amd

在nwjs中运行。v2初始版本没有

其他示例和用法

  • browser-amd-diff-editor

在浏览器中运行代码差异比较编辑器

  • browser-amd-iframe

在<iframe>中运行

  • browser-amd-localized

本土化运行

  • browser-amd-monarch

使用Monarch编写的自定义语言语法运行

  • browser-amd-shared-model

在两个编辑器中使用相同的文本模型

想要深入学习的小伙伴可以直接到官网上手学习，左边是配置，右边即可看到效果，这样的话学习起来会比较的快

相关链接

以下版本可能无法跟进最新的版本

React版本：

https://github.com/react-monaco-editor/react-monaco-editor

Vue版本：

https://github.com/matt-oconnell/vue-monaco-editor

Angular版本：

https://github.com/materiahq/ngx-monaco-editor

总结

Monaco Editor不得的不说是一个非常强大的在线代码编辑器，可以为自己的项目提供云端代码编辑器的基础技术支持，可以在其基础上扩展很多强大的功能，当然上手不一定简单，需要根据自己的需求确定开发方案，有需求的小伙伴可以去研究一下！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

编辑器

firefox

safari

在线代码编辑器：Monaco Editor 的相关文章

随机推荐

  • 51单片机原理图

    51单片机 TOC

  • ANDROID APP的页面布局（Part I）

    做一个好的APP自然是不能缺少一个好的漂亮的且合理的页面布局了 ANDORID里面支持的布局大致上有下列即种 根据界面的需要使用不同的布局可达到事半功倍的效果 这个跟做HMTL的页面的原理是一样 好的页面看起来就是舒服 而且容易维护 1 L

  • Lambda表达式与函数式编程

    文章目录 函数式编程 Stream流 概述 为什么学 函数式编程思想 Lambda表达式 概述 Lambda表达式的前身 省略规则 Stream流 概述 案例数据准备 创建流 中间操作 终结操作 reduce归并 注意事项 Optional

  • C语言运算符优先级（超详细）

    转自 http blog csdn net huangblog article details 8271791 每当想找哪个运算符优先级高时 很多时候总是想找的就没有 真让人气愤 现在 终于有个我个人觉得非常全的 分享给大家 欢迎拍砖 C语

  • 前端开发面试题及答案整理（合集）

    前端开发面试题及答案 1 对Web标准以及W3C的理解与认识 答 标签闭合 标签小写 不乱嵌套 提高搜索机器人搜索几率 使用外链CSS和JS脚本 结构行为表现的分离 文件下载与页面速度更快 内容能被更多的用户所访问 内容能被更广泛的设备所访

  • Qt 助手 assistant 单独运行 及 字体设置

    曾经在 Qt creator上 不知道点击了哪里 Qt 助手也是可以单独运行的 这样就可以不需要安装字体了 但是 一直没有找到这个重现的规则 或者快捷键 1 运行Qt 助手 assistant linux 所在目录 xxxxxx Qt5 1

  • java调用 Myeclipse用jax-ws创建的webservice具体方法（三）

    首先需要下载所需的jar包 webservices所需全部jar包下载 点击打开链接 直接上代码 import java net MalformedURLException import java net URL import java r

  • 基于亚奈奎斯特采样和SOMP算法的平板脉冲响应空间插值matlab仿真

    目录 1 算法运行效果图预览 2 算法运行软件版本 3 部分核心程序 4 算法理论概述 5 算法完整程序工程 1 算法运行效果图预览 2 算法运行软件版本 matlab2022a 3 部分核心程序 fine regular grid NSa

  • Could not resolve placeholder 'jdbc.driverClassName' in string value "${jdbc.driverClassName}

    org springframework beans factory BeanDefinitionStoreException Invalid bean definition with name dataSource defined in f

  • $.ajaxFileUpload上传文件出现错误...问题总结

    1 加载报错 ajaxfileupload js 1 Uncaught ReferenceError jQuery is not defined 上传报错 Uncaught TypeError ajaxFileUpload is not a

  • C++ Pat甲级1003 Emergency （25 分）图+dfs

    1003 Emergency 25 分 As an emergency rescue team leader of a city you are given a special map of your country The map sho

  • FPGA实现电机转速PID控制

    通过纯RTL实现电机转速PID控制 包括电机编码器值读取 电机速度 正反转控制 PID算法 卡尔曼滤波 最终实现对电机速度进行控制 使其能够渐近设定的编码器目标值 一 设计思路 前面通过SOPC之NIOS 实现电机转速PID控制 调用中断函

  • Android数据库升级解决方案

    方案一 第三方库ActiveAndroid数据库 在对应继承model的实体类中添加的字段 并且对应的数据库版本升级 1 在assert资源文件添加一个migrations文件夹 里面创建文件 版本号 sql 文件中添加数据库脚本 即 AL

  • 最容易理解的JavaScript解决约瑟夫环问题的方式之一

    这种方式虽然效率不是最高的 但绝对是最容易理解的思路之一 function ysf flag stayNum allNum let arr let start 1 for let i 1 i lt allNum i arr push i 当

  • 做爱做的事，做有快感的事

    还是不发首页了 最近没规划 需要缓一缓 因为发首页还是要符合几点要求的 所以就先停停 不过文章还是得写 本来十一点多就写好了 没想到洗个澡就过了十二点 今天就更像聊天了 上一篇说到拖延症 最后留下了一个尾巴 就是怎么找到不会发生拖延症的事去

  • 【Git】（四）子模块

    1 增加子模块 进入准备添加子模块所在的目录 例如library git submodule add b 1 0 0 0 git gitee com sunriver2000 SubModule git 参数 b用于指定子模块分支 2 更新

  • 刷脸支付每个人的脸都具有唯一性无法复制

    移动支付时代 手机成为承载资金的介质 人人手机里有支付宝或者微信支付 但如果手机一旦丢失 不法分子破解了用户密码 那么资金安全也面临威胁 而刷脸支付的第一大优势就在于保证用户资金安全 因为在整个支付过程中 用户完全不用打开手机和自己的资金账

  • [游戏开发][Shader]GLSLSandBox转Unity-CG语言

    官网 GLSL Sandbox Galleryhttps glslsandbox com 屏幕坐标计算 fragCoord与 ScreenParams mat2矩阵转换 vec2向量 在GLSL里mat2 a b c d 函数返回vec2

  • yolov3之数据集预处理

    目录 txt标签文件的说明 将jpg与txt文件分开 txt生成xml标签文件 xml标签详解 xml标签生成txt txt标签文件的说明 获取到的数据集是这样的 需要转换为VOC格式 其实就是将txt转换为xml文件 打开txt文件可以看

  • 在线代码编辑器：Monaco Editor

    monaco editor是微软开源的一款web版代码编辑器 它支持智能提示 代码高亮 代码格式化 Monaco Editor是为VS Code提供支持的代码编辑器 运行在浏览器环境中 编辑器提供代码提示 智能建议等功能 供开发人员远程更方

热门标签