code-run

一个代码在线编辑预览工具，类似codepen。

在线示例：https://wanglin2.github.io/code-run-online/。

相关文章

使用Skypack在浏览器上直接导入ES模块

快速搭建一个代码在线编辑预览工具

如何手动解析vue单文件并预览？

手把手教你实现在Monaco Editor中使用VSCode主题

特性

• 支持多种预处理语言

• 支持多种布局随意切换

• 支持添加额外的css、js资源

• 内置多种常用模板

• 支持导出zip

• 支持代码格式化

• 美观强大的控制台

• 支持vue单文件（2.x、3.x）

• 支持直接移植VSCode主题，并且已经内置了大量优质主题

• 内置支持保存到github gist【gist API】，想要保存到自己的存储体系修改也十分简单

• 内置支持生成和carbon一样漂亮美观的代码图片

• 内置使用unpkg及importmap支持在浏览器上使用ES模块语法

• 支持嵌入模式，方便在文档网站中使用，让文档示例更轻松

本地构建

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资源的路径；

打包命令

npm run build

项目主要技术

脚手架： Vue CLI

框架：Vue 3.X全家桶，通过script setup使用组合式API

UI库：element-plus

代码编辑器：Monaco Editor

界面截图

关于使用ESM

目前在JavaScript、TypeScript、CoffeeScript、Vue3、Vue2等模式下支持使用ESM，默认情况下，如果你直接按下列方式导入模块的话：

import moment from 'moment'

最后会转换成：

import moment from 'https://unpkg.com/moment?module'

也就是使用unpkg，但是有些模块unpkg获取不到ESM版本，或者直接这样获取到的版本不是我们所期望的，比如导入vue时，我们需要的是https://unpkg.com/[email protected]/dist/vue.esm-browser.js，但是https://unpkg.com/vue?module默认返回的是https://unpkg.com/[email protected]/dist/vue.runtime.esm-bundler.js?module，这个版本无法运行在浏览器上，所以这时候就可以通过手动添加importmap来设置导入模块的来源。

主题新增教程

本教程针对迁移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文件，针对Vue3。

编译器更新指南

因为本项目是纯前端项目，所以在使用less、sass、typescript等预处理语言或扩展语言时需要在线进行编译，这个工作是由各个语言的编译器处理的，这些编译器你可以在/public/parses/目录下找到，随着时间的推移，肯定会落后于它们的新版本，所以你需要定期更新它们，获取它们的浏览器使用版本并不是一件易事，所以在这里将有些仅有的经验分享给大家。

• less

首先npm i less，然后在node_modules找到less/dist/目录，该目录下的两个文件都是umd格式的，可以直接使用。

• sass

sass目前使用的是这个项目sass.js，但是这个项目已经三年没有更新了。

• babel

babel提供了浏览器使用版本，具体可以参考官方文档@babel/standalone。

• typescript

typescript直接npm i typescript，然后找到node_modules/typescript/lib/typescript.js文件，它也是支持直接在浏览器上使用的。

• coffeescript

coffeescript也是直接npm i coffeescript，然后找到node_modules/coffeescript/coffeescript-browser-compiler-legacy/coffeescript.js文件，支持直接在浏览器上使用。

• livescript

livescript的浏览器使用版本可以直接去其官方仓库下载browser，不过也两年没有更新了。

• 其他

postcss、stylus暂时没有找到浏览器使用版本或编译成功，知道的朋友欢迎提个issue。

新增代码模板

项目内置了几个常用的代码模板，可以根据需要进行增减，模板配置文件在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两个配置上新增该布局：

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.可参考其他布局结构的内容，复制过来修改，最终的内容应该是这样的：

<template>
  <!-- 该容器的直接DragItem直接数量为2，方向水平排列，第一个DragItem直接允许缩小到0，第二个DragItem组件最小允许缩小到20px -->
  <Drag :number="2" dir="h" :config="[{ min: 0 }, { min: 20 }]">
    <!-- 编辑器块，索引为0，禁止缩放该块，隐藏拖动条 -->
    <DragItem :index="0" :disabled="true" :showTouchBar="false">
      <!-- 编辑器增加，内部编辑器排列方向为垂直，配置了要显示的编辑器 -->
      <Editor dir="v" :showList="showList"></Editor>
    </DragItem>
    <!-- 预览&控制台，索引为1，允许拖动进行缩放 -->
    <DragItem :index="1" :disabled="false">
      <!-- DragItem又嵌套了一个容器组件，该容器的直接DragItem直接数量为2，方向垂直排列，第一个DragItem直接允许缩小到0，第二个DragItem组件默认显示的高度为48px，且最小允许缩小到48px -->
      <Drag :number="2" dir="v" :config="[{ min: 0 }, { min: 48, default: 48 }]">
        <DragItem
          :index="0"
          :disabled="true"
          :showTouchBar="false"
          title="预览"
        >
          <Preview></Preview>
        </DragItem>
        <DragItem :index="1" :disabled="false" title="控制台">
          <Console></Console>
        </DragItem>
      </Drag>
    </DragItem>
  </Drag>
</template>

<script setup>
import Editor from '@/components/Editor.vue'
import Preview from '@/components/Preview.vue'
import Console from '@/components/Console.vue'
import Drag from '@/components/Drag.vue'
import DragItem from '@/components/DragItem.vue'
import { reactive } from 'vue'

// 配置只显示vue编辑器
const showList = reactive([
    {
        title: 'VUE',// 编辑器名称
        disableDrag: true,// 禁止拖动进行缩放
        showTouchBar: false// 隐藏推动条
    }
])
</script>

注释已经解释的很详细，详情可参考接下来的组件文档。

布局相关组件文档

Drag组件

该组件相当于是一个容器，每个容器会实例化一个Resize尺寸拖动调整类，内部需要放置DragItem组件。

组件props：

表1

config数组每一项的对象的属性：

DragItem组件

该组件代表一个可拖动的块，需要放置在Drag组件下，通过slot来传入需要实际显示的内容。DragItem组件内可再嵌套Drag容器。

组件props：

Editor组件

该组件目前包含js、css、html、vue四个编辑器，可以控制具体显示哪几个，以及它们的排列方式。

组件props：

表2

showList数组的每一项可以是一个字符串，可选值为：HTML、 CSS、 JS、VUE，代表四种编辑器，配置了哪几个就显示哪几个。

如果需要再配置一些属性，比如是否允许该编辑器拖动等等，可配置的属性如下：

暂未解决的问题

1.生成代码图片功能偶尔生成的图片高度超出了代码实际的高度，目前暂未找到原因及根本解决方法。可选方法之一为生成图片后再提供一个图片裁剪的功能。

2.极少数情况下会出现主题不生效的问题。

致谢

本项目中预处理/扩展语言的编译部分、其他一些细节有参考了项目codepan的实现。

License

MIT