因为Talk is cheap. Show me the code，写编程的文章，往往都要附上代码片段。
文章中展示代码普遍有3种形式：
- 代码文本，通过pre或code标签插入
- codepen.io 等工具 或 gist链接
- 代码截图
今天讨论的就是第3种——代码截图。
演示
现存工具的问题
现在生成的代码截图的工具很多，效果也很好，深受大家喜爱。我这里列举一些大家比较常用的：
- Carbon | Create and share beautiful images of your source code
- Codeimg.io
- text2image
- Instacode
- CodeKeep.io - Save & Organize code snippets
- Create beautiful images of your code
- Polacode - Visual Studio Marketplace
- CodeSnap - Visual Studio Marketplace
以上工具都非常好用实用，但也有一些缺点：
名字记不住
以上这么多工具，我只能记住codeimg.io，所以我自己写的工具也叫 codeimg：http://codeimg.mzh.ren/。
像最有名的Carbon，它的网页链接是：https://carbon.now.sh/，压根记不住。
虽然可以存储在书签栏，但还增加了查找成本。
丢失编辑器代码样式
其实我们每天用的代码编辑器的主题，应该就是我们比较习惯的代码高亮、配色、风格等。
然而从编辑器拷贝到网页版的工具中，编辑器的样式就不翼而飞了，取而代之是工具提供样式。
如果你的博客是深色风格，你需要代码截图是浅色风格，默认的风格如果是深色，就冲突了。
所以还要花时间去选择适当的风格，增加了时间成本。
功能不全
对，功能不全。
大部分工具都有核心功能，如格式化、外框、语法高亮等。
但总会丢一些小功能，如文件标题、水印、字体大小等。如Carbon就没有水印。
配置复杂且配置不持久
有些工具非常复杂，把所有细节都配置化了。如：codeimg.io。
好不容易配置好样式、水印等，结果下次打开，又得重新配置，闹心！
并且，大而全的工具，加载相对较慢。
适用性不强
有些工具作为vscode的插件，但该插件又不一定会有pycharm或idea的版本。
网页版的适用性强一些。
定制代码截图工具
原理
实现代码截图的过程主要为3步：
- 在网页中放置（富）文本编辑器（如textarea之类）或代码编辑器
- 粘贴入代码
- 将页面渲染成图片下载
（富）文本编辑器
在HTML中，任何元素都可以被编辑。为了使元素可编辑，你所要做的就是在html标签上设置"contenteditable"属性，它几乎支持所有的HTML元素。
Content Editable - Web 开发者指南 | MDN
contentEditable也是大家最为喜闻乐见的富文本编辑器实现方案，部分基础功能由浏览器实现。
这种方式能记住源格式的样式，如设置元素#editor-content的contentEditable属性为true，结合样式，就能产生一个编辑器。
再将该编辑的html源码粘贴上去，就达到以下效果：
html2canvas
html2canvas - Screenshots with JavaScript
html2canvas.js是一个将html dom转化成图片的 js 类库。
该js 类库通过读取 DOM 和应用元素上的样式，将当前页面呈现为画布图像。
它不需要来自服务器的任何渲染，因为整个图像是在客户端的浏览器上创建的。但是，正因为它严重依赖於浏览器，因此该库不适合在 nodejs 中使用。它也不会神奇地绕过任何浏览器内容策略限制，因此呈现跨域内容将需要代理才能将内容获取到相同的来源。
实现代码
通过reactjs构建了一个小网页。
App.js
样式文件App.css
界面效果如下，真是一言难尽…
贴入代码，点击下载按钮，调用codeimg的方法，即可下载。
其中CodeImg.js即是对html2canvas.js进行简单封装：
实现很简单，脏活累活全被html2canvas.js干完了，感谢它。
希望能为你提供思路，定制属于自己的代码截图工具！
