Sometimes we go through blogs, technical posts and people share code like this, right?

This is actually a picture, although said inside the content can not be copied, but this picture as a whole look very delicate, right? The three red, yellow and green buttons in the upper left corner are the Windows operation buttons in the Mac, and the highlight color of the code is exactly the same as the color in our IDE, so the whole is a Mac style.

Recently, some friends in the group also asked how to do this, here to introduce to you.

This tool is called Carbon. It has its own website, Code repository, and a similar VS Code plugin.

Web site

Carbon maintains a website: carbon.now.sh/, which we can open to see:

As you can see, Carbon provides a variety of options, such as theme selection, programming language, and some Settings for background color and spacing, as well as a preview of the code below, where you can edit the code.

We can post whatever code we want below, such as here’s a Python code:

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

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

Copy the code

We can directly paste it in, and then we can choose the theme color, language, background color, and click the setting button to configure more details:

Window Controls controls realistic effects on the top left corner, such as rounded corners, colored buttons, margins, shadows, and so on, as well as some automatic width adjustments.

When you’re done, click Copy. There are several options, such as copy the image, the URL, or copy the iframe directly.

For example, clicking the copy to iframe link should give you something like this:

<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=0 px&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%25 20%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>
Copy the code

Copying to a URL leads directly to a URL that can be used:

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=0 px&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%25 20%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
Copy the code

So once we have the URL, we can refer to any address.

You can choose whether to export the vector graph SVG or PNG, as shown in the figure below:

My words are generally click copy, and then use my IPIC tool uploaded to the CDN above.

warehouse

Carbon is also open source. The GitHub repository is github.com/carbon-app/… This is the source code for the site we just saw, which is based on Node.js.

"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": ^ "server"."downshift": "^ also 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"
  },
Copy the code

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

If you think the site can meet the needs, then you can continue to use the site.

VS Code plug-in

There’s also a similar VS Code plugin that does similar things, and I think it works pretty well. It’s called CodeSnap, and it’s been downloaded over 170,000 times.

You can just search and generate it in VS Code.

So how do you generate code images?

It’s really simple. Let’s select the code we want to share:

Then right-click on the CodeSnap menu and generate a preview of the corresponding Code in the VS Code panel:

At this time, we can click the button on the top to directly download the image corresponding to the code, as shown in the picture:

Isn’t it nice to get the same result you see in your own editor?

CodeSnap can also support changing Settings in VSCode. Currently, the following are supported:

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.
Copy the code

About the content of the more you can directly to CodeSnap plugin home page to view: marketplace.visualstudio.com/items?itemN…

As an aside for my VS Code Theme, I use the Community Material Theme plugin:

Then use the first default theme it provides:

If you think good words also welcome to try ha ~

I hope that’s helpful.

For more exciting content, please pay attention to my public account “Coder of Attack” and “Cui Qingcai!