最近经常在 medium 上看到一些漂亮的源代码语法高亮图片。 比如:
甚至是 iframe 嵌入语法高亮的源代码:
这是使用 Carbon 生成的源代码语法高亮图片。有了这个工具,以后在微博,微信公众号等平台上分享代码就再也不用愁了。
Carbon 是一个免费的开源库,用于创建和分享源代码语法高亮图片。 你可以通过官网??轻松使用 Carbon 。
小广告:如果你使用 WordPress 则可以使用?WP-googlecodeprettify 插件
特性
- GitHub gist导入. 只需要在url后面加上github gist id就可以导入
- 定制化. 可定制图片的语法主题,窗口样式等
- 所见即分享. 点下鼠标就可以分享到推特上面
示例
使用
导入
有几种不同的方法可以将代码导入到Carbon:
- 把文件拖到编辑器
- 在carbon url后添加GitHub gist id(比如?
carbon.now.sh/你的gist id
) - 直接粘贴代码
定制化
当你把代码导入到Carbon后,你可以定制生成的代码图片。可定制的内容有语法主题,背景颜色,窗口主题,或者padding距离。
导出/分享
当你定制完图片样式后,可以分享到推特上面,或者直接保存。
社区
下面是社区已经创建的一些优秀的项目,让我们使用起来更加简单方便:
编辑器插件
- ?- 在IntelliJ IDEA中选中当前文件的一段代码到Carbon中
- ?- 用
shift-cmd-A
命令在Carbon中导入你当前的Atom文件 - ?- 用
carbon
命令在Carbon中导入你当前的VS Code文件 - ?- 在Sublime Text3中选中当前文件的一段代码到Carbon中
- ?- 用
CarbonNowSh()
函数在Carbon中导入你当前的Vim/Neovim文件 - ?- 用交互式函数
carbon-now-sh
在Carbon中导入你当前的Emacs文件
命令行工具
- ?- 在Carbon中打开一个文件或者直接使用
carbon-now
下载它,特色是交互式模式,可选高亮等
Libraries
- ?- 迭代式处理
R
中的图片并在Carbon中打开,或者直接下载。
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂