npm install itcast-code一个代码在线编辑预览工具，类似codepen。
在线示例：https://wanglin2.github.io/code-run-online/。
手把手教你实现在Monaco Editor中使用VSCode主题
- [x] 支持多种预处理语言
- [x] 支持多种布局随意切换
- [x] 支持添加额外的css、js资源
- [x] 内置多种常用模板
- [x] 支持导出zip
- [x] 支持代码格式化
- [x] 美观强大的控制台
- [x] 支持vue单文件（2.x、3.x）
- [x] 支持直接移植VSCode主题，并且已经内置了大量优质主题
- [x] 内置支持保存到github gist【gist API】，想要保存到自己的存储体系修改也十分简单
- [x] 内置支持生成和carbon一样漂亮美观的代码图片
- [x] 内置使用Skypack支持在浏览器上使用ES模块语法
- [x] 支持嵌入模式，方便在文档网站中使用，让文档示例更轻松
``bash
git clone https://github.com/wanglin2/code-run.git
cd code-run
npm i
npm run serve
`
请先确认打包后应用的基路径，项目默认的基路径为code-run-online，所以大部分情况下你都需要修改为你自己的路径，步骤如下：
1.修改vue.config.js文件里的publicPath字段。
2.修改src/config/index.js文件的base字段。
默认的路由模式为hash模式，如果需要使用history模式请修改src/config/index.js文件的routerMode字段。
另外history模式下如果存在多级路径，可能需要修改以下文件：
1.修改/public/index.html文件的prettier相关js资源的路径；
`bash`
npm run build
脚手架： Vue CLI
框架：Vue 3.X全家桶，通过script setup使用组合式API
UI库：element-plus
代码编辑器：Monaco Editor
本教程针对迁移VSCode主题。
1.确定要新增的主题，先在本地VSCode上安装并切换到该主题，然后按F1或Command/Control + Shift + P或鼠标右键点击Command Palette/命令面板，接着找到并点击Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题，然后VSCode就会生成一份json数据，保存到项目的/scripts/vscodeThemes/目录下。
2.然后命令行执行命令npm run convertTheme，转换后的主题会被输出到项目的/public/themes目录下，接下来再执行命令npm run createThemeList即可生成主题配置，接下来即可在设置->主题设置里看到所有主题，并可以切换使用。
- npm run buildConsole：编译项目的/public/console/index.js文件为ES5语法，输出到同目录下的compile.js，该文件会在页面预览的iframe里进行加载，请勿直接修改compile.js文件。
- npm run buildMonacoWorker：打包Monaco Editor编辑器的worker文件，如果使用的Monaco Editor编辑器版本变化了需要重新打包。
- npm run convertTheme：将VSCode主题文件转换成Monaco Editor主题文件。
- npm run createThemeList：根据主题文件列表自动生成配置文件。
- npm run buildVueSFCCompiler：打包@vue/compiler-sfc文件。
项目内置了几个常用的代码模板，可以根据需要进行增减，模板配置文件在src/config/templates.js。
项目内置了几个常用的页面布局模板，如果不满足你的需求也可以新增布局，一个布局就是一个vue单文件，可以在src/pages/edit/layouts/目录下找到所有布局，每个布局其实就是确定如何显示编辑器、控制台、预览三部分，编辑器包含js、css、html、vue四个编辑器，可配置显示哪几个、顺序、是否允许拖动等，需要新增的布局也需要放到该目录下。
接下来以新增一个vue单文件的布局为例来看，首先确定布局细节，我们想左侧显示一个vue编辑器，右侧显示预览和控制台，预览模块默认展开，控制台默认最小化：
1.首先我们在layouts目录下创建一个VueSFC.vue。
2.修改src/config/constants.js文件，引入该组件，并在layoutList和layoutMap两个配置上新增该布局：
`js
import VueSFC from '../pages/edit/layouts/VueSFC.vue'
export const layoutList = [
// ...
{
name: 'Vue单文件',
value: 'vue',
}
]
export const layoutMap = {
// ...
vue: VueSFC
}
`
可以添加一张该布局的预览图片，放置到src/assets/layoutImgs/目录下，然后在constants.js文件里引入，最后在previewImgMap配置上添加即可。
这样修改完后即可在页面的设置功能里的布局设置的下拉列表里看到新增的Vue单文件选项。接下来完善VueSFC.vue的内容。
3.可参考其他布局结构的内容，复制过来修改，最终的内容应该是这样的：
`vue
:disabled="true"
:showTouchBar="false"
title="预览"
>
`
注释已经解释的很详细，详情可参考接下来的组件文档。
该组件相当于是一个容器，每个容器会实例化一个Resize尺寸拖动调整类，内部需要放置DragItem组件。
组件props：
| 名称 | 介绍 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| dir | 容器内部的DragItem组件排列方式，可选项：h（水平排列）、v（垂直排列） | String | h |DragItem
| number | 内部的组件数量 | Number | 0 |DragItem
| config | 配置内部的组件的信息，数组类型，每一项都是一个对象，具体的属性请看表1 | Array | [] |
#### 表1
config数组每一项的对象的属性：
| 名称 | 介绍 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| default | 对应索引的DragItem组件默认显示的尺寸，dir为h时指宽度，为v时指高度 | Number | 默认容器内的所有DragItem组件平分空间 |DragItem
| min | 对应索引的组件允许显示的最小尺寸，当发生拖动时，如果该组件空间被挤压，默认允许被压缩到0，即完全不显示，如果配置了该属性，则缩小到配置的大小后不再变化 | Number | 0 |DragItem
| max | 对应索引的组件允许显示的最大尺寸，当发生拖动时，如果该组件空间被增加，默认会增加到允许的最大尺寸，如果配置了该属性，则增加到配置的大小后不再变化 | Number | 0 |
该组件代表一个可拖动的块，需要放置在Drag组件下，通过slot来传入需要实际显示的内容。DragItem组件内可再嵌套Drag容器。
组件props：
| 名称 | 介绍 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| disabled | 是否禁止拖动 | Boolean | false |
| touchBarSize | 拖动条的尺寸，dir为h时指宽度，为v时指高度 | Number | 20 |DragItem
| index | 该组件在容器内的同级组件列表中的索引，从0开始 | Number | 0 |
| showTouchBar | 是否显示拖动条 | Boolean | true |
| title | 标题 | String | |
| hide | 是否隐藏该组件 | Boolean | false |
该组件目前包含js、css、html、vue四个编辑器，可以控制具体显示哪几个，以及它们的排列方式。
组件props：
| 名称 | 介绍 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| hide | 是否隐藏编辑器 | Boolean | false |
| dir | 排布方向，v（垂直）、h（水平） | String | h |
| showList | 要显示的编辑器列表，数组类型，每一项可以是数字也可以是一个对象，见表2 | Array | ['HTML', 'CSS', 'JS'] |
#### 表2
showList数组的每一项可以是一个字符串，可选值为：HTML、 CSS、 JS、VUE，代表四种编辑器，配置了哪几个就显示哪几个。
如果需要再配置一些属性，比如是否允许该编辑器拖动等等，可配置的属性如下：
| 名称 | 介绍 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| title | 编辑器名称，可选项：HTML、 CSS、 JS、VUE` | String | |
| disableDrag | 是否禁止拖动缩放该编辑器 | Boolean | |
| showTouchBar | 是否显示该编辑器的推动条 | Boolean | |
1.生成代码图片功能偶尔生成的图片高度超出了代码实际的高度，目前暂未找到原因及根本解决方法。可选方法之一为生成图片后再提供一个图片裁剪的功能。
2.极少数情况下会出现主题不生效的问题。
本项目中预处理/扩展语言的编译部分、其他一些细节有参考了项目codepan的实现。