Sometimes when we browse blogs and technical posts we find people sharing code like this?

This is actually a picture, although the content inside can not be copied, but the picture as a whole look very sophisticated, right? The three red, yellow and green buttons in the upper left corner are the window buttons in the Mac, and then the code highlighting color scheme is exactly the same as the color scheme in our IDE, the whole is a Mac style.

Recently, there are some partners in the group asking how this is done, so here’s an introduction.

This tool is called carbon, it has its own website, code repository, and a similar VS Code plugin, so here is a unified introduction.

Carbon

carbon maintains a website of its own: https://carbon.now.sh/, which we can open to see.

You can see that carbon provides a variety of options, such as theme selection, programming language, and some background color, spacing configuration, and below is a preview of the code, and we can also edit the code here.

We can paste any code we want at the bottom, for example, here is a Python code.

1
2
3
4

def get_vowels(string):
    return [vowel for vowel in string if vowel in 'aeiou'] 

print("Vowels are:", get_vowels('This is some random string'))

We can paste it in directly, and then we can choose our favorite theme color, language, and background color, as well as configure more details by clicking on the setting button.

Here Window controls can control the realistic effect of the upper left corner, such as whether it has a rounded corner effect, whether the button has a color, and also control the inner margin, shadow, etc. There are also some configurations for automatic width adjustment.

There are several options here, such as copy image, URL or copy iframe directly.

For example, if you click Copy as iframe link, you will get the following content.

1
2
3
4
5

<iframe
  src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=material&wt=none&l=python&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=def%2520get_vowels%28string%29%253A%250A%2520%2520%2520%2520return%2520%255Bvowel%2520for%2520vowel%2520in%2520string%2520if%2520vowel%2520in%2520%27aeiou%27%255D%2520%250A%250Aprint%28%2522Vowels%2520are%253A%2522%252C%2520get_vowels%28%27This%2520is%2520some%2520random%2520string%27%29%29"
  style="width: 561px; height: 146px; border:0; transform: scale(1); overflow:hidden;"
  sandbox="allow-scripts allow-same-origin">
</iframe>

Copying it as a URL will give you a direct URL that can be used.

1

https://carbon.now.sh/?bg=rgba%28255%2C255%2C255%2C1%29&t=material&wt=none&l=python&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=def%2520get_vowels%28string%29%253A%250A%2520%2520%2520%2520return%2520%255Bvowel%2520for%2520vowel%2520in%2520string%2520if%2520vowel%2520in%2520%27aeiou%27%255D%2520%250A%250Aprint%28%2522Vowels%2520are%253A%2522%252C%2520get_vowels%28%27This%2520is%2520some%2520random%2520string%27%29%29

With the URL, we can refer to any address.

Of course, exporting is also possible, you can choose whether to export vector svg or png, as shown in the figure.

In my case, I usually click to copy and then use my ipic tool to upload to the CDN.

Repository

At the same time carbon is still open source, GitHub repository address is: https://github.com/carbon-app/carbon, in fact, this is the source code of the site we just saw, is based on Node.js development, picking up a package.json source code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

"dependencies": {
    "@next/bundle-analyzer": "^10.2.2",
    "@reach/visually-hidden": "^0.15.0",
    "actionsack": "^0.0.14",
    "axios": "^0.21.1",
    "cm-show-invisibles": "^3.1.0",
    "codemirror": "5.61.1",
    "codemirror-graphql": "^1.0.1",
    "codemirror-mode-elixir": "^1.1.2",
    "codemirror-solidity": "^0.2.3",
    "date-fns": "^2.21.3",
    "dom-to-image": "^2.6.0",
    "downshift": "^6.1.3",
    "dropperx": "^1.0.1",
    "eitherx": "^1.0.2",
    "email-validator": "^2.0.4",
    "escape-goat": "^3.0.0",
    "firebase": "^8.6.2",
    "graphql": "^15.5.0",
    "highlight.js": "^10.7.2",
    "lodash.debounce": "^4.0.8",
    "lodash.omitby": "^4.6.0",
    "match-sorter": "^6.3.0",
    "morphmorph": "^0.1.3",
    "ms": "^2.1.3",
    "next": "^10.2.2",
    "next-offline": "^5.0.5",
    "prettier": "^2.3.0",
    "react": "^17.0.2",
    "react-click-outside": "^3.0.0",
    "react-codemirror2": "^7.2.1",
    "react-color": "^2.19.3",
    "react-dom": "^17.0.2",
    "react-image-crop": "^6.0.16",
    "react-mailchimp-subscribe": "^2.1.3",
    "tohash": "^1.0.2",
    "use-climate-change-reminder": "^0.0.7"
  },

You can see that it is mainly based on Next, React, CodeMirror development, if you want to base on this secondary development can also be, such as docking cloud storage, to achieve some automation and so on.

If you think the website just now can meet the needs, then you can continue to use the website just now.

VS Code Plugin

There is also a similar VS Code plugin that can achieve similar functionality, which I think is quite good, the plugin is called CodeSnap and has now been downloaded more than 170,000 times.

You can just search inside VS Code to generate it.

How do we generate code images?

It’s very simple, we first select the code we want to share.

Then right-click on the menu and select CodeSnap to generate a preview of the corresponding code in the VS Code panel.

At this point we can click on this button above to download the image corresponding to the code directly, as shown in the figure.

The result is the same as what you see in your own editor, doesn’t that feel good?

CodeSnap can also support changing settings in VSCode, and currently supports the following.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

codesnap.backgroundColor: The background color of the snippet's container. Can be any valid CSS color.

codesnap.boxShadow: The CSS box-shadow for the snippet. Can be any valid CSS box shadow.

codesnap.containerPadding: The padding for the snippet's container. Can be any valid CSS padding.

codesnap.roundedCorners: Boolean value to use rounded corners or square corners for the window.

codesnap.showWindowControls: Boolean value to show or hide OS X style window buttons.

codesnap.showWindowTitle: Boolean value to show or hide window title folder_name - file_name.

codesnap.showLineNumbers: Boolean value to show or hide line numbers.

codesnap.realLineNumbers: Boolean value to start from the real line number of the file instead of 1.

codesnap.transparentBackground: Boolean value to use a transparent background when taking the screenshot.

codesnap.target: Either container to take the screenshot with the container, or window to only take the window.

codesnap.shutterAction: Either save to save the screenshot into a file, or copy to copy the screenshot into the clipboard.

For more information, you can go directly to the CodeSnap plugin’s homepage: https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap

In addition, I would like to mention my VS Code theme, I use the Community Material Theme plugin

Then use the first default theme it provides:

If you feel good, you are also welcome to try ~

I hope it will be helpful to everyone.

Reference https://cuiqingcai.com/30030.html