今天给大家介绍一款代码在线编辑预览工具，类似codepen、jsbin、jsfiddle等。

特性

  • 支持多种预处理语言
  • 支持多种布局随意切换
  • 支持添加额外的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/，如果你想换一个，可以按如下步骤修改：

  • 修改vue.config.js文件里的publicPath字段。
  • 修改src/config/index.js文件的base字段。
修改路由模式

默认的路由模式为hash模式，如果需要使用history模式请修改src/config/index.js文件的routerMode字段。

另外history模式下如果存在多级路径，可能需要修改以下文件：

修改/public/index.html文件的prettier相关js资源的路径；

打包命令
npm run build

技术栈

  • 脚手架： Vue CLI
  • 框架： Vue 3.X全家桶，通过script setup使用组合式API
  • UI库： element-plus
  • 代码编辑器： Monaco Editor

界面截图

版权声明：
1、本网站名称：帝企吧
2、本站永久网址：https://www.diqiba.com
3、本网站的文章部分内容可能来源于网络及作者投稿，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7、本站所有资源来源于互联网，仅用于学习及参考使用，切勿用于商业用途，如产生法律纠纷本站概不负责！ 8、资源除标明原创外均来自网络转载，版权归原作者所有，若侵犯到您权益请联系我们删除，我们将及时处理！ 9、若您需使用非免费的软件或服务，请购买正版授权并合法使用！