今天给大家介绍一款代码在线编辑预览工具，类似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
界面截图
开源地址
https://github.com/wanglin2/code-run
构建高质量的技术交流社群，欢迎从事编程开发、技术招聘HR进群，也欢迎大家分享自己公司的内推信息，相互帮助，一起进步！
文明发言，以
交流技术、职位内推、行业探讨为主
广告人士勿入，切勿轻信私聊，防止被骗
加我好友，拉你进群
原文始发于微信公众号（极客之家）：高颜值开源，一款代码在线编辑预览神器
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/306879.html
