首页
首页
沸点
课程
直播
活动
竞赛
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
实现一个 Code Pen
狂奔滴小马
创建于2022-09-03
订阅专栏
从零实现一个简易的 Code pen。 体验地址:https://code.runjs.cool/
等 18 人订阅
共6篇文章
创建于2022-09-03
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
实现一个 Code Pen:(一)项目初始化
前段时间掘金上线了一个新功能 Code pen,可以在线写代码,笔者对这种在线实时编辑的功能充满了好奇,所以打算开发一个简易的 Code pen。
实现一个 Code Pen:(二)在 Next.js 中使用 Monaco Editor
Monaco Editor 是 VS Code 中使用的开源代码编辑器, 拥有代码高亮和代码自动补全的功能,本文介绍 Monaco Editor 的加载方式和 React 组件封装
实现一个 Code Pen:(三)10 行代码实现代码格式化
在上文中,我们使用 monaco-editor 结合 Next.js,打造了编辑器的功能,在本文中,我们将继续优化 monaco-editor, 使它拥有代码格式化的功能。
实现一个 Code Pen:(四)浏览器编译代码
前面的文章中,我们配置好了编辑器,实现了 css、html、js 的编辑,现在我们需要做代码实时运行的功能了,并且可以直接写 less、scss、JavaScript、typescript。
实现一个 Code Pen:(五)白嫖云数据库
本篇主要介绍如何使用 uniapp 中的云函数和云数据库,并且通过云函数 URL 化,来给外部应用访问
实现一个 Code Pen:(六)云函数生成网页缩略图
本文介绍了生成缩略图的方式,包含客户端生成,和服务端生成,并简要分析了阿里云、腾讯云和 vercel 生成浏览器截图的方式。