Monaco Editor - 基本使用

最近编写了一款UI组件的使用文档,需要显示组件代码用来辅助说明组件的用法,于是经过一番百度,认识了Monaco Editor这个编辑器

Monaco Editor是什么？

Monaco是一个web编辑器,monaco和VSCode在编辑代码，交互以及UI上几乎是一模一样的，不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron。

开始使用

我用的是vue版本的包 $\color{#4285f4}{monaco-editor-vue}$ 使用方法如下:

第一步:

安装monaco

npm install monaco-editor-vue

第二步:

在自己的文件中引入monaco-editor-vue

<template>
  <div class="dom-block">
    <MonacoEditor
      :options="options"
    ></MonacoEditor>
  </div>
</template>
 
<script>
import MonacoEditor from 'monaco-editor-vue';
export default {
  name: "index",
  components: {
    MonacoEditor
  },
  data() {
    return {
      options: {
        value: '', // 初始值
     	readOnly:true//设置编辑器只读状态
      },
    }
  }
};
</script>

第三步

设置语法高亮
monaco自身提供了许多种内置语言，我们只需要引入即可。

import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';

参考链接:
monaco官方文档
闲谈Monaco Editor-基本使用
Monaco Editor 使用指南
Monaco Editor API 使用范例
代码编辑器插件：Monaco Editor的基本使用
monaco-editor vscode 代码编辑器