在线代码编辑与分享工具

分享一些最近看到的在线编辑和部署的工具

在线编辑器

之前看React新官网发现有个codesandbox,发现其功能很强大，于是尝试寻找了其他竞品并做个介绍

codesandbox

官网介绍的功能很多,说简单点是一个在线编辑器，同时可以分享给其他人review,还可以进行部署项目，可以安装一些包。

1. 我们的开发工具允许你创建快捷方式来运行任何命令，包括在启动、文件更改或点击时。

   创建标准化的开发容器，自动完成启动开发服务器、lint、build、终端、数据库服务器等任务。

2. CodeSandbox使每个分支和拉取请求都在URL后面的强大云环境中运行。 在内部，一切都经过了预配置，并在预览的同时运行。运行测试，查看代码，然后点击提交更改。
3. CodeSandbox在一个强大的云环境中保持每个分支和拉动请求的运行，在一个URL后面。在里面，所有东西都是预先配置好的，并与预览版一起运行。运行测试，审查代码，并通过点击提交更改。
4. CodeSandbox使你的代码在一个快速的微虚拟机上运行，在两秒钟内启动任何开发环境。几乎可以运行任何东西并从任何设备上访问它。任何在本地运行的东西都可以在CodeSandbox上运行。

5. 让每个人都能预览你的代码，审查它并直接在你的代码库上发表评论。

   通过像 inspect 这样的低代码工具，任何人都可以轻松地进行修改，并通过点击提交。

6. 轻松地添加服务器，并为每个拉动请求和每个分支配置一个独特的数据库。

   这意味着在切换分支时不再有迁移或回滚的麻烦。

7. 享受在云中运行你的代码和增强协作的力量，以及VS Code扩展、键盘绑定和主题的生产力优势。

可以说，像codepen或者jsfiddle这种在线编辑器还是无法跟Codesandbox相比的，但是如果你只需要简单的在线写点代码并分享那么CodePen已经够了。

不过以上三种工具都对前端的东西支持更好，其中JSFiddle我现在访问都用不了。

CodePen

CodePen: Online Code Editor and Front End Web Developer Community

也是在线代码编辑器，写CSS的比较多，也可以用于分享代码

代码片段分享

以下是ChatGpt的回答

Pastie

Pastie

<img src="https://s2.loli.net/2023/05/21/oF9kGtX6LzabOUd.png" alt="image-20230521211746945" style="zoom:67%;" />

支持以上格式，但是编辑代码时并不支持补全这些功能，看起来是用来把本地已经写好的代码放上去保存后生成链接发给别人的，比如下面的代码片段，不过时间只有24h.

Pastebin

Pastebin.com

跟上面的类似，但是需要注册一下，功能更多.

<img src="https://s2.loli.net/2023/05/21/7VN8H2vyWpRB1Uq.png" alt="image-20230521212638787" style="zoom:50%;" />

Github Gists

Create a new Gist (github.com)创建Gists

drowning-in-codes’s gists (github.com)个人的Gists

我个人推荐使用Github Gists,下面按照官方文档给一些介绍。

你可以创建两种清单：公开和秘密。如果你准备好与世界分享你的想法，就创建一个公开的要点，如果你不准备，就创建一个秘密的要点，说白了私密无法被搜索引擎找到，但是也可以通过分享URL给别人。

创建好后还可以利用url或者html嵌入来分享,

<script src="https://gist.github.com/drowning-in-codes/88f00a06346f90bfe88d9d72aa09690d.js"></script>

你也可以看看别人分享的代码Discover gists (github.com)

也可以进行搜索Search (github.com)

可以在一些本地IDE上安装插件直接通过Github Gist分享代码

在线部署

Vercel

<img src="https://s2.loli.net/2023/05/21/JvcgZEXyV3po1GI.png" alt="image-20230521231004789" style="zoom:50%;" />

可以部署静态博客以及一些接口

Netlify

主要用于部署网站

跟Vercel类似,但是目前Vercel风头正盛

GitHub Pages

Github的,也可以用来部署静态网站

GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，（可选）通过构建过程运行文件，然后发布网站。 可以在 GitHub Pages 示例集合中看到 GitHub Pages 站点的示例。

你可以在 GitHub 的 github.io 域或自己的自定义域上托管站点。 有关详细信息，请参阅“配置 GitHub Pages 站点的自定义域”。

你可以创建在 Internet 上公开可用的 GitHub Pages 站点。 使用 GitHub Enterprise Cloud 的组织还可以通过管理对站点的访问控制来私下发布站点。 有关详细信息，请参阅 GitHub Enterprise Cloud 文档中的“更改 GitHub Pages 站点的可见性”。

Render

可以用来部署nodejs服务

Heroku

跟上者类似，但貌似宣布付费了

总结

在线编辑器推荐Codesandbox,代码片段推荐Github Gists,在线部署使用Vercel和Render。像Vercel,Netlify,Github Page这种适合搭建网站或全栈App,后者Render可以直接

如果只是想要简单的分享下代码Pastie即可。

本文由mdnice多平台发布