登录

code-run

wanglin2更新放缓

在线代码编辑与实时预览工具，类似 CodePen、JSBin，可直接在浏览器里写 HTML/CSS/JS 并即时查看效果。

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

暂无版本616star177fork同步于 2026-11-07 07:32 UTC
在线代码编辑实时预览代码沙箱前端编辑器
对比 GitHub 官网codecode-editorcodepeneditorjavascript

怎么上手

从 README 代码块原样提取，可能是其中一种安装方式
原文 
git clone https://github.com/wanglin2/code-run.git
npm i
npm run serve
npm run build
硬件要求

README 没有说明硬件要求。

下载：源码 zip·GitHub Releases（安装包）本站不镜像安装包

项目说明

这个项目的说明还在生成中，先参考下面「最近发版」和 README。

最近发版

0 个版本
全部 release

暂无 release 数据（可能没有发版，或尚未同步）。

用户点评

登录用户的真实使用记录，可按版本和硬件筛选
共 0 条

    还没有人点评。第一个说出真实体验的人最有价值。

    README 原文

    未翻译
    在 GitHub 打开

    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】，想要保存到自己的存储体系修改也十分简单

    • 内置支持在未配置github gist的情况下将变动保存到url中，可方便的将url分享给他人查看

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

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

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

    本地构建

    git clone https://github.com/wanglin2/code-run.git

cd code-run

npm i

npm run serve

    打包

    修改应用基路径

    请先确认打包后应用的基路径，项目默认的基路径为/code-run/，如果你想换一个，可以按如下步骤修改：

    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

    界面截图

    界面截图1

    界面截图2

    界面截图3

    关于使用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

    可以使用Browserify 或 webpack把它打包到一个文件中。

    • 其他

    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：

    名称介绍类型默认值
    dir容器内部的DragItem组件排列方式，可选项：h（水平排列）、v（垂直排列）Stringh
    number内部的DragItem组件数量Number0
    config配置内部的DragItem组件的信息，数组类型，每一项都是一个对象，具体的属性请看表1Array[]
    表1

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

    名称介绍类型默认值
    default对应索引的DragItem组件默认显示的尺寸，dir为h时指宽度，为v时指高度Number默认容器内的所有DragItem组件平分空间
    min对应索引的DragItem组件允许显示的最小尺寸，当发生拖动时，如果该组件空间被挤压，默认允许被压缩到0，即完全不显示，如果配置了该属性，则缩小到配置的大小后不再变化Number0
    max对应索引的DragItem组件允许显示的最大尺寸，当发生拖动时，如果该组件空间被增加，默认会增加到允许的最大尺寸，如果配置了该属性，则增加到配置的大小后不再变化Number0

    DragItem组件

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

    组件props：

    名称介绍类型默认值
    disabled是否禁止拖动Booleanfalse
    touchBarSize拖动条的尺寸，dir为h时指宽度，为v时指高度Number20
    index该组件在容器内的同级DragItem组件列表中的索引，从0开始Number0
    showTouchBar是否显示拖动条Booleantrue
    title标题String
    hide是否隐藏该组件Booleanfalse

    Editor组件

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

    组件props：

    名称介绍类型默认值
    hide是否隐藏编辑器Booleanfalse
    dir排布方向，v（垂直）、h（水平）Stringh
    showList要显示的编辑器列表，数组类型，每一项可以是数字也可以是一个对象，见表2Array['HTML', 'CSS', 'JS']
    表2

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

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

    名称介绍类型默认值
    title编辑器名称，可选项：HTML、 CSS、 JS、VUEString
    disableDrag是否禁止拖动缩放该编辑器Boolean
    showTouchBar是否显示该编辑器的推动条Boolean

    暂未解决的问题

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

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

    致谢

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

    License

    MIT

    相关项目

    同分类里 star 最高的项目
    对比全部 →
    vscode
    microsoft·TypeScript

    微软开源的跨平台代码编辑器，基于 Electron 和 TypeScript 构建，支持插件扩展、调试和 Git 集成，适合日常开发写代码。

    代码编辑器+4编辑器 / IDE
    195252+16844k1.145.22026-11-10 05:16 UTC
    neovim
    neovim·Vim Script

    Vim 的分支版本，用 Lua 做配置和插件开发，内置 LSP 与异步 API，让终端编辑器更好扩展、更好用。

    文本编辑器+4编辑器 / IDE
    103536+747.4kv0.12.62026-11-10 03:15 UTC
    zed
    zed-industries·Rust

    用 Rust 打造的高性能多人协作代码编辑器，由 Atom 和 Tree-sitter 作者开发，主打低延迟编辑与实时协同编码。

    代码编辑器+4编辑器 / IDE
    94610+75812kv1.27.02026-11-10 02:53 UTC
    AFFiNE
    toeverything·TypeScript

    把文档、白板、表格融为一体的开源知识库，可离线使用、支持多人实时协作，是 Notion 和 Miro 的替代方案。

    知识库+4编辑器 / IDE
    74414+1275.5kv2026.11.9-canary.9072026-11-10 04:33 UTC