[广告: 最高 ¥2000 红包]阿里云服务器, 主机等产品通用, 可叠加官网常规优惠使用 | 限时领取
因为 Talk is cheap. Show me the code, 写编程的文章, 往往都要附上代码片段.
文章中展示代码普遍有 3 种形式:
代码文本, 通过 pre 或 code 标签插入
codepen.io 等工具
代码截图
今天讨论的就是第 3 种 -- 代码截图.
演示
http://codeimg.mzh.ren/
现存工具的问题
现在生成的代码截图的工具很多, 效果也很好, 深受大家喜爱. 我这里列举一些大家比较常用的:
- Carbon | Create and share beautiful images of your source code https://carbon.now.sh/
- Codeimg.io https://codeimg.io/
- https://text2image.jaychen.fun/
- Instacode http://instaco.de/
- CodeKeep.io - Save & Organize code snippets https://codekeep.io/home
- Create beautiful images of your code https://ray.so/
- 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 https://html2canvas.hertzen.com/
html2canvas.JS 是一个将 HTML dom 转化成图片的 JS 类库.
该 JS 类库通过读取 DOM 和应用元素上的样式, 将当前页面呈现为画布图像.
它不需要来自服务器的任何渲染, 因为整个图像是在客户端的浏览器上创建的. 但是, 正因为它严重依赖於浏览器, 因此该库不适合在 Node.JS 中使用. 它也不会神奇地绕过任何浏览器内容策略限制, 因此呈现跨域内容将需要代理才能将内容获取到相同的来源.
实现代码
通过 reactjs 构建了一个小网页.
App.JS
样式文件 App.CSS
界面效果如下, 真是一言难尽...
贴入代码, 点击下载按钮, 调用 codeimg 的方法, 即可下载.
其中 CodeImg.JS 即是对 html2canvas.JS 进行简单封装:
实现很简单, 脏活累活全被 html2canvas.JS 干完了, 感谢它.
希望能为你提供思路, 定制属于自己的代码截图工具!
CodeImg 代码截图 by 码中人
http://codeimg.mzh.ren/
来源: http://www.mzh.ren/diy-a-code-screenshot.html