B high and beautiful code snippet sharing image generation

We usually use beautiful IDE, The code in the compiler is rich in color 、 Support highlighting , But in fact, when sharing with others , Such as the public number 、 Microblogging 、Twitter And other social platforms , Most of them do not support code layout , It's a headache to read the code . So today I would like to recommend a few tools for creating code images quickly , Let your code share be higher 、 Typesetting is more intuitive .

Marmoset

Web site address ：http://t.cn/AiT9X7mV

Marmoset Is a Chrome Applications , It allows you to take a screenshot of your code in a perspective way . from Chrome The store will Marmoset Add to Chrome, After the start Marmoset window , Left window Marmoset A code is provided by default , The window on the right shows the perspective effect of this code , Drag the right window to adjust the perspective angle , Effect real-time display , Different compiler themes are available at the bottom of the window 、 Code display mode 、 Perspective code effect and many other built-in parameters . Adjust the perspective effect , Click... At the bottom of the window 「Save As …」 Save the code screenshot to the local computer , It is recommended to add .jpg、.png、.tif And other common image formats , So that later computers can read pictures .

Codeimg.io

Web site address ：https://codeimg.io/

Codeimg.io Is a tool for creating code images that is still under test , At present, the basic functions required to create code images have been released ： According to popular social platforms Facebook、Twitter、Instagram And custom creation projects 、 Support JPG、PNG and SVG Project format 、 Adjust font size 、 Save user-defined settings, etc .

Enter... After creating the project Codeimg page , Left function parameter adjustment area , New project button on the top right 、 Current project name 、 Project Download button , Right lower item preview and code title 、 Content editing area .

Copy and paste your code directly into the content window on the right , left 「Canvas」 Parameter to resize canvas 、 The gap between the window and the canvas 、 Canvas background color .

CodeZen

Web site address ：http://codezen.rishimohan.me/

CodeZen Is a very simple code to image tool , It's as simple as working with a text editor , Can quickly export your source code as a syntax style image .

Copy and paste your code to CodeZen, from CodeZen Preset language 、 font size 、 Window theme 、 The background color 、 Window width and other parameters to adjust the code image effect , Save image support JPG and PNG Format .

Carbon

Web site address ：https://carbon.now.sh/

Carbon By Dawn Labs Create and develop an open source project of code to image , Currently in GitHub Owned on 20000 More stars , More active users per month than 50000.

Carbon Support direct drag code file 、 take GitHub gist id Attach to URL、 Directly paste the code into the editor three ways to import your code .

Put the code in Carbon after , You can change the grammar theme 、 The background color / Images 、 Window theme or fill from define code image , When setting the background image, you can also drag and drop the image file to Carbon As the background of the code image .

After customizing the image , You can send image links or download saved images , Save image support PNG and SVG Two formats .

Glorious Demo

Web site address ：https://glorious.codes/demo

Glorious Demo It's an open source JavaScript library , It provides a simple API To create an animation for your code sample . Currently in GitHub Close to 3000 star .

GitHub Address ：
https://github.com/glorious-codes/glorious-demo#installation