Create and share beautiful images of your source code
Create and share beautiful images of your source code
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 网站只是下载图片慢却可以访问，那为什么不直接截图呢？
推荐阅读
是真的菜
