Ray.so:将你的代码制作成图片格式,加入窗口外框和阴影效果!

Ray.so:将你的代码制作成图片格式,加入窗口外框和阴影效果!

如果你想把一段代码制作成图片,只要从编辑器直接截图就能做到,内容呈现上也没什么问题。

本文要介绍的「Ray.so」是一个线上将代码转为图片的工具,默认情况提供四种配色主题,可切换背景显示或深色模式,四种不同的宽度大小,选择后即时更新在网页上。

当然最重要的是支持大部分常见的程序语言,内置「自动选择」模式在代码提供后自动识别,加入色彩效果。

和其他同类工具一样,Ray.so 可以在图片加入窗口和阴影效果,背景看起来很有质感,点击下载就能将当前看到的画面保存为.png格式。

不过转为图片的缺点就是其他人难以直接复制使用,若有分享代码让阅读者快速复制的话建议使用代码分享服务。

Ray.so使用教程

STEP 1

打开 Ray.so 会看到一段 JavaScript 代码范例,直接将你要制作成图片的代码提供,网站会自动侦测程序语言类型,上方的窗口名称可编辑,会成为下载图片文件名。

Ray.so:将你的代码制作成图片格式,加入窗口外框和阴影效果!

默认情况会自动侦测(Auto-Detect)程序语言,如果有误可以从右下角手动选择,选择程序语言可确保在上色时获得较为正确的显示效果。

Ray.so:将你的代码制作成图片格式,加入窗口外框和阴影效果!

STEP 2

左下角的颜色可以选择四种不同配色模式,也有显示隐藏背景、深色模式和调整窗口外侧内距的功能,如果你想让画面看起来不拥挤,可以选择较高的内距值,选择后都会即时显示在图片上。

Ray.so:将你的代码制作成图片格式,加入窗口外框和阴影效果!

STEP 3

最后,点击右下角「Download Image」即可将当前看到的画面保存为 PNG 格式。

Ray.so:将你的代码制作成图片格式,加入窗口外框和阴影效果!

STEP 4

下图就是我在 Ray.so 制作的图片范例,使用Swift程序语言加上深色效果,看起来很有气势,对于在网站呈现代码来说是个蛮不错的选择。

Ray.so:将你的代码制作成图片格式,加入窗口外框和阴影效果!

Ray.so官网链接