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 网站只是下载图片慢却可以访问,那为什么不直接截图呢

推荐阅读

Android Hybrid 混合开发初体验

你知道RGB,那你知道什么是YUV么?

CPU:不是我针对谁,在座的各位都是垃圾

是真的菜

原文发布于微信公众号 - 菜天Android(newbietian)

原文发表时间:2019-05-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券