Monaco Editor教程（三）：开启 Hello World demo示例

Monaco Editor教程（三）：开启 Hello World demo示例

背景

前面两篇文章分别向大家介绍了搭建monaco-editor的本地开发环境，以及为什么学习它。本篇文章我们就正式踏入学习阶段，希望我们大家都准备好坚定好自己的目标，守护好自己的信念。真正花上几个月时间，好好研究monaco-editor的使用和开发。

学习一个东西最简单的起步就是写一个Hello world了。本篇文章就向大家介绍使用monaco-editor写一个 Hello World 的案例，并详细介绍其中设计的参数与配置。

由于monaco-editor是一个非常庞大的项目，光是集成方式就至少5中以上，amd，esm，electron，webpack，ts，vite，requirejs。。。第一次接触我们就不要把步子迈那么大，本篇只讲在不使用任何框架下，单个纯html文件使用script标签来引入monaco-editor资源，并实现hello world示例。

Hello World

在单个html文件里实现一个monaco编辑器是非常简单的。但也有很多注意点。下面让我们一起看一下。

创建index.html

首先创建一个index.html 内容如下

<!D