前端在线编译工具 Codepen 实现代码在线编译并分享

Codepen 在线编辑前端代码的网站

Codepen 可以 在线编写代码并调试,代码可以保存在网站,方便分享与提问,比如弄个小demo复现问题,给解答者方便理解并帮助提问者解决问题,也可以在上面提供分享自己的有意思的小项目,和博客 差不多;

保存自己的代码 及一些配置

首先注册与登陆Codepen 网址 https://codepen.io/
这里不介绍!
登录成功!后 点击pen 创建一个新的空白编辑页;
在这里插入图片描述
空白页在这里插入图片描述
也可自行修改编译器的布局
在这里插入图片描述
点击 settings => behavior可以 配置自动保存和格式化保存 及自动更新视图
在这里插入图片描述
点击 save 就可以保存代码了
在这里插入图片描述

分享代码

保存后直接 引用链接就行了
如:js拖拽功能的实现
在这里插入图片描述
或者使用iframe插入
点击右下角 embed 选择 iframe 复制下面生生成代码
在这里插入图片描述

查看已经保存的 pens (代码笔记)

点击左上角图标 回到自己首页
在这里插入图片描述
点击your work 即可查找你保存的代码笔记
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值