0
点赞
收藏
分享

微信扫一扫

codepen学习

一点读书 2022-06-17 阅读 108

最近在很多博客上都看到这种页面

codepen学习_codepen

从而了解到了一个网站​​codepen​​​,他是一款在线前端编辑器,类似于​​jsfiddle​​。接下来我们介绍如何在自己博客上嵌入codepen的代码。

  1. 注册codepen账号
  2. 添加一个pen,并保存
  3. 得到这个pen的的嵌入内容
  4. 把步骤3中的嵌入内容嵌入markdown文档中
  5. 发布并测试

接下来做一个示范:

1)在界面上添加一个pen:

codepen学习_codepen_02

在弹出页面上输入html、css、js,如果要引入外部js、css点击这里

codepen学习_css_03

2)返回到pen,点击刚刚创建的pen:

codepen学习_html_04

3)点击embeding:

codepen学习_html_05

然后选择

codepen学习_codepen_06

最后

codepen学习_css_07

至此,就可以吧上述代码拷贝到html或者markdown中。

 


举报

相关推荐

0 条评论