微软开源在线代码编辑器——Monaco Editor

Posted 2023-04-13

参考技术A

Monaco Editor是为VS Code提供支持的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码。移动浏览器或移动Web框架不支持Monaco编辑器。简单的理解就是VSCode中的代码编辑器和Monaco Editor使用的很多相同的核心模块，你可以将Monaco Editor用到自己的项目中，作为云端编辑器的支持，支持IE 11，Edge，Chrome，Firefox，Safari和Opera！

Github：

文档和示例等：

安装没什么好说的，你可以到上面地址中下载，也可以直接使用npm安装

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

内联代码差异比较

非内联代码差异比较

上面都是原生Visual Studio亮色主题

Visual Studio Dark主题：

高对比度暗色主题：

想要直接开发可能不是一件非常简单的事情，所以给出官网提供的所有示例，建议感兴趣的同学可以直接下载下来查看相关示例代码

1、在终端执行以下四条命令，前提是你已存在git和node的环境，如果不存在则先安装git或者node

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

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

3、项目示例Demo介绍

其他示例和用法

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

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

React版本：

Vue版本：

Angular版本：

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

字体编程常用字体推荐，微软，苹果，开源系统默认代码字体

目录

编程常用字体推荐，微软，苹果，开源系统默认代码字体
一、苹果家的
1、Monaco
2、Menlo
二、微软家的
1、Consolas
2、Courier New
三、Linux
1、Ubuntu Mono
2、DejaVu Sans Mono
四、其他
1、Source Code Pro
2、Fira Code
3、Lucida Sans Typewriter
4、Noto Mono

下载地址：https://download.csdn.net/download/qq_33957603/21518366

一、苹果家的

1、Monaco

OS x 之前的默认字体，风格奇特，十分可爱。

2、Menlo

Monaco 字体美观且容易辨识，普遍被认为是写代码的专用字体，而 Menlo 字体显示非常清晰，是继 Monaco 之后被选上的字体。二者均出于 Mac OS 系统下，Menlo一度用于后来的Xcode。

二、微软家的

1、Consolas

微软家的字体，使用了微软的ClearType字型平滑技术，之前的Windows和VisualStudio里都在用它，包括现在的VScode默认字体。

2、Courier New

超细款字体，最早是IBM家制造的，在早期的windows中使用过。

三、Linux

1、Ubuntu Mono

Ubuntu 的内嵌字体，也十分可爱。

2、DejaVu Sans Mono

许多 Linux 发行版的标准配置，庞大的字形覆盖率。

• 受在 GNOME 中使用的带有版权和闭源的 Vera 字体的启发，DejaVu Sans Mono 是一个非常受欢迎的编程字体，几乎在每个现代的 Linux 发行版中都带有它。
• 在 Book Variant 风格下 DejaVu 拥有惊人的 3310 个字形，相比于一般的字体，它们含有 100 个左右的字形。在工作中你将不会出现缺少某些字符的情况，它覆盖了 Unicode 的绝大部分，并且一直在活跃地增长着。

四、其他

1、Source Code Pro

出自 Adobe 之手，Adobe 公司号称最佳的编程字体。而且还是开源的，无论商业或个人都可以免费使用。

• 字母和数字易于分辨,如: 英文字母o 和 阿拉伯数字 0 ,或者 英文字母 l 和 阿拉伯数字 1 ，两个单引号 ‘’ 和双引号 ”.
• 字体等宽，保持对齐，美观漂亮

2、Fira Code

Fira 是 Mozilla 公司 主推的字体系列。Fira Code 是其中的一员，专为写程序而生。出来具有等宽等基本属性外，还加入了编程连字特性

3、Lucida Sans Typewriter

Lucida是一个西文字体家族名，由查尔斯·毕格罗（Charles Bigelow）和克里斯·霍尔姆斯（Kris Holmes）于1985年设计。
Bigelow&Holmes公司与TeX的厂商Y&Y合作制作了一套完整的TeX用数学符号，因此这个字体也是少数TeX数学公式排版能使用的字体之一。

Lucida Console也是英文版Windows XP和Windows CE中蓝屏死机和Windows記事本的默认字体。Lucida Sans Demibold（轮廓和Lucida Grande Bold体完全一样，但是数字间距较紧）被用于苹果公司的Mac OS X操作系统，以及其他众多程序。

4、Noto Mono

巨量的语言覆盖率，由 Google 中的一个大团队打造。尽管它并不是专为编程所设计，但它在 209 种语言（包括 emoji 颜文字！）中都可以使用，并且一直在维护和更新。该项目非常庞大，是 Google 宣称 “组织全世界信息” 的使命的延续。