需要代码提示，关键字高亮，能够格式化代码。（不需要在线运行）
简简单单的需求。
方案一： Monaco-editor
简介：微软的开源项目，开源中国上面的在线代码编辑器也是用的这个（我就是顺着藤爬到Monaco editor的）
有 ‘在线 VS code’ 美称
官网：https://microsoft.github.io/monaco-editor/
优点：多语言支持，代码提示（内置函数蛮多的）。文档很清晰，API很详细了。更重要的是给出的案例非常多。
缺点：一开始摸不着头脑（本人是在vue项目使用），静态资源的引用是魔鬼（官方就是ES5方式资源引用），最好的方案是要搭配 webpack plugin 使用
找了那么多的资料，没见几个demo写的好（这也是我要再写一篇的原因啦 争取看到的人都可以快速上手）
源码：https://github.com/Microsoft/monaco-editor
案例：https://github.com/Microsoft/monaco-editor-samples/ 一定要看这个，官方给你展示各种功能（一套git pull 下来，在本地环境直接看demo），
鬼知道我走了多少冤枉路。
本人案例展示，直接上源码吗？哈哈哈。
1 npm install monaco-edtior //安装 2 3 test.vue //新建一个文件 4 <template> 5 <div ref="container"></div> 6 </template> 7 8 <script> 9 import * as monaco from "monaco-editor"; // 包体很大了 但是demo可以跑起来 10 11 export default{ 12 mounted() { 13 var editor = monaco.editor.create(this.$refs.container, { 14 value: [ 15 'function x() {', 16 '\tconsole.log("Hello world!");', 17 '}' 18 ].join('\n'), 19 language: 'javascript', 20 minimap:{ 21 enabled:false 22 }, 23 selectOnLineNumbers: true, 24 roundedSelection: false, 25 cursorStyle: 'line', // 光标样式 26 automaticLayout: false, // 自动布局 27 glyphMargin: true, // 字形边缘 28 useTabStops: false, 29 fontSize: 16, // 字体大小 30 autoIndent: false //自动布局 31 }); 32 } 33 } 34 </script>