2019 年第 8 篇原创,宜收藏。
前言
大家早上好中午好下午好,我是菜天。
今天给大家分享一款精美的代码片段图片生成工具 - carbon。记忆中,在网上看到这样的代码段图片很多次了,十分漂亮。
漂亮的事物总是让人心情愉、记忆深刻,就想着也用在自己的公众号、博客甚至 PPT 中,相信效果绝对刚刚的!
几经搜索,找到了它:carbon。
carbon 的 slogan 是:Create and share beautiful images of your source code。
没错,就是看起来可能让有些人觉得我很装的英文标题。但这是我觉得最合适的标题了。
今天这篇就是讲的 carbon,以及今天我为了如何更加方便的使用 carbon 的沙雕经历。耐心耐心,不想看沙雕经历的可以直接翻到最后~。
使用
https://carbon.now.sh/,carbon 可以通过网页直接访问。
将对应的代码段直接复制到页面中,点击 Export,然后选择生成图片格式,即可生成精美的代码段图片。
carbon 提供了多 Theme 支持、多语言支持、背景色(图片)可变支持,甚至通过点设置按钮,你可以自定义自己喜欢的 Theme。
强迫症的苦恼
But,由于国内的某些神秘的不可抗拒因素,导致我们访问 carbon 变的不是那么友好。即使通过传说中访问外国网站的手段访问上了,也会出现很久才能导出图片的情况。
这对于强迫症的我,是一种折磨:我写文章正文思泉涌呢,正要贴一段代码,这图片怎么就还不好啊?
直到我看到了 carbon 页面最下方的 “source” 按钮,原来 carbon 是开源的。
开源,就意味着有无限的可能。于是,我就有了一个大胆的想法:将 carbon 本地化。
不熟悉的 Node.js
carbon 源代码:
https://github.com/dawnlabs/carbon
不管三七二十一,先把源码下载下来,解压后,进入项目目录。carbon 的目录结构我是看不懂的,完全没有接触过。
作为一个程序员,永远不能对自己说不。
花了大概一个多小时,知道了 carbon 这是 Node.js 项目。
搜索 Node.js 是什么,如何配置 Node.js,Node.js 项目结构如何,如何运行Node.js 项目,安装 npm 等,一阵折腾。
最后到了安装依赖包的时候,发现某些依赖包无法下载成功。神秘力量依然存在,阻止着下载依赖包,阻止我前行。
作为一个程序员,永远不能对自己说不。
经搜索,发现 npm install 安装依赖的时候,是可以指定源的,国内有淘宝 npm 镜像源可以使用。
嘿嘿嘿,这样我就可以安装依赖包啦~
淘宝源:
地址:https://registry.npm.taobao.org
网站:https://npm.taobao.org/
npm 安装依赖包:
$ npm install --registry https://registry.npm.taobao.org
嘿嘿嘿,这样我就可以安装依赖包啦。然后就发现 carbon 中的一个依赖包是淘宝 npm 源没有的!
找不到 next-offline@^4.0.0 这个依赖包。我是个菜鸡,根据以前寥寥的经验,心想着碰碰运气吧, 或许淘宝源有其它版本的,一搜,还真有,赶紧将 package.json 中这个依赖改成 3.4.0 版本。错误不再有,成功进行下去。
上天欲让你灭亡,必先让你疯狂。
Cypress 这个玩意为什么一直卡在这不动了?!这是个什么玩意啊?!为什么用了国内的源,还卡在了 10% 呀?!这后面的秒数是个什么意思啊?!我还要等 8829 秒么?!WTF?!不搞了不搞了。
作为一个程序员,永远不能对自己说不。
网上查了下,发现这是前端的E2E测试框架。emmm,删掉 package.json 中一切与 Cypress 相关的字眼,重新安装依赖。
经过漫长的等待,成功!
通过在 github 的 carbon issue 中搜索,发现了对应的运行方法:
$ npm run dev
执行后,访问 http://localhost:3000 地址,秒下载图片,美滋滋~
我自己美滋滋了,怎么样让别的小伙伴也可以美滋滋呢?抱着这种想法,我开始了今天我的第二段沙雕经历。
不熟悉的 Docker
Docker 是什么?Docker 是容器。什么是容器?具体是怎么的,大家自行搜索去吧。
我为什么会想到 Docker 呢?
首先我的需求是:怎么样让小伙伴们都能美滋滋呢?
上面配置 carbon 项目运行环境实在是过于繁琐,有的朋友仅仅是使用一下,要费这么多力气自然是不值得的。
而 Docker,就是我 第二个 想到的相对来说符合我的需求的。
通过 Docker,能将上面配置的 carbon 环境,打包生成一个 Docker 镜像。理想状态下,小伙伴无需这么繁琐的配置,仅下载 Docker 和我的镜像就可以永久在本地运行,美滋滋。
可是,我...怎么安装 Docker 啊?怎么用 Docker 运行 Node.js 项目啊?该怎么生成镜像啊?镜像怎么使用啊?
作为一个程序员,永远不能对自己说不。
参考 Docker 优质教程,《Docker — 从入门到实践》
又是将近 2 个小时的折腾,安装好 Docker,配置好 Docker 国内加速镜像源,写好 Dockerfile。就开始生成我的 carbon 镜像吧,镜像名:newbietian_carbon
$ docker build -t newbietian_carbon
镜像创建成功,查看镜像
$ docker images
可以看到已经有我的 newbietian_carbon 镜像存在了。
运行镜像
$ docker run -d -p 9000:3000 newbietian_carbon
其中, run 是运行某镜像,-d 是后台运行,-p 9000:3000 是将 Docker 中的虚拟端口 3000 映射到真正的电脑 9000 端口。
通过 http://localhost:9000 访问
这个镜像大小足足有 1.16 G,我上传你下载也挺难受的。没办法,镜像也就能自己用用了。代码倒是不多,有兴趣的话,相关代码可以 加我好友 获取。
最后
有的同学可能好奇,我第一个想到让小伙伴们一起美滋滋的想法是什么。
我将 carbon 部署在了我的服务器上,直接访问即可。
公众号后台回复 carbon 获取访问方式。
这篇文章中很多的名词,其实我个人也是刚接触到,或仅是听过,谈不上了解。比如 Node.js,Docker 等。
对于熟悉的人,我本身不专业,也就不够格去深入的说;而对于没接触过的人,一些关键名词我都有提及,对应的流程若是想了解,仔细点看也是能照着做完整的。
在搜索引擎存在与信息大爆炸的现代,咱们或许记不住甚至不知道所有细节,但要善于利用关键词,能够通过搜索引擎得到自己想要的答案。
如果你觉得这篇文章写的比较沙雕,那就对了,因为整个事情就很沙雕。为什么?
因为在我写完这篇文章的时候,我忽然想到一个非常重要的点:我 TM 费了一天功夫,既然 carbon 网站只是下载图片慢却可以访问,那为什么不直接截图呢?
推荐阅读
是真的菜