如果你想把一段代码制作成图片,只要从编辑器直接截图就能做到,内容呈现上也没什么问题。
本文要介绍的「Ray.so」是一个线上将代码转为图片的工具,默认情况提供四种配色主题,可切换背景显示或深色模式,四种不同的宽度大小,选择后即时更新在网页上。
当然最重要的是支持大部分常见的程序语言,内置「自动选择」模式在代码提供后自动识别,加入色彩效果。
和其他同类工具一样,Ray.so 可以在图片加入窗口和阴影效果,背景看起来很有质感,点击下载就能将当前看到的画面保存为.png
格式。
不过转为图片的缺点就是其他人难以直接复制使用,若有分享代码让阅读者快速复制的话建议使用代码分享服务。
Ray.so使用教程
STEP 1
打开 Ray.so 会看到一段 JavaScript 代码范例,直接将你要制作成图片的代码提供,网站会自动侦测程序语言类型,上方的窗口名称可编辑,会成为下载图片文件名。
默认情况会自动侦测(Auto-Detect)程序语言,如果有误可以从右下角手动选择,选择程序语言可确保在上色时获得较为正确的显示效果。
STEP 2
左下角的颜色可以选择四种不同配色模式,也有显示隐藏背景、深色模式和调整窗口外侧内距的功能,如果你想让画面看起来不拥挤,可以选择较高的内距值,选择后都会即时显示在图片上。
STEP 3
最后,点击右下角「Download Image」即可将当前看到的画面保存为 PNG 格式。
STEP 4
下图就是我在 Ray.so 制作的图片范例,使用Swift程序语言加上深色效果,看起来很有气势,对于在网站呈现代码来说是个蛮不错的选择。
Ray.so官网链接