DEV Community

Cover image for How to add color to your Dev.to article’s code snippets
Christine Belzie
Christine Belzie

Posted on • Updated on

How to add color to your Dev.to article’s code snippets

Table of Contents

Flashback

When I was in college, a common question my English professors would ask me and my classmates is “Where are the examples?” and developers ask the same question when reading your tutorials on Dev.to. Now of course the answer to this would be to add code snippets from your sample projects, but what if I told you adding color to them will help them stand out? Adding color to your code snippets makes them look more appealing. Kind of like how adding seasoning or a squeeze of citrus to your meal makes it more flavorful. Still unsure? No worries, this guide will teach you two ways you can add color to your code snippets.

Method #1: Using backticks

If you want to add color to your code snippets in a quick way, the backtick method is for you. Here’s how to do it.
Step 1: add three backticks on top like this:

top backtick

Step 2: Add your code snippet’s language name next to the top backticks. This helps organize your code snippet. For example, the code snippets in my Hashnode post, 3 Easy Uncommon Accessibility Techniques You Need to Know For Coding” are made with HTML. So if I were to cross-post in the article to Dev.to, here’s how the top backtick will look:

backtick with programming language's name next to it

Step 3: Add your code snippet: Next, pick a code snippet you think best exemplifies the step in your coding tutorial. From there, copy and paste it underneath the top backticks. Here’s how it looks:

backticks with code snippet underneath

Step 4: Add the bottom: Finally, add three backticks underneath the code like you did for step 1. Here it is in full:



<div role="contentinfo"> <h2>Privacy Statement</h2> <!-- footer content --> </div>


Enter fullscreen mode Exit fullscreen mode

Now, the backtick method is not the only way you can make your code snippets colorful. Let’s try another one.

Method #2: Use CodeSnap

If you’re looking for another way to make your code snippets colorful, I highly recommend using CodeSnap.

GitHub logo kufii / CodeSnap

📸 Take beautiful screenshots of your code in VS Code!

CodeSnap

📸 Take beautiful screenshots of your code in VS Code!

Features

  • Quickly save screenshots of your code
  • Copy screenshots to your clipboard
  • Show line numbers
  • Many other configuration options

Usage Instructions

  1. Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap.
  2. Select the code you'd like to screenshot.
  3. Adjust the width of the screenshot if desired.
  4. Click the shutter button to save the screenshot to your disk.

Tips:

  • You can also start CodeSnap by selecting code, right clicking, and clicking CodeSnap
  • If you'd like to bind CodeSnap to a hotkey, open up your keyboard shortcut settings and bind codesnap.start to a custom keybinding.
  • If you'd like to copy to clipboard instead of saving, click the image and press the copy keyboard shortcut (defaults are Ctrl+C on Windows and Linux, Cmd+C on OS X), or bind codesnap.shutterAction to copy in your…

It’s an awesome Visual Studio Code extension that adds a colorful background to code snippets you pick. Here’s how to use it.

Step 1: Pick your code snippet: Go to the file in your project’s repository and highlight your chosen code snippet

A GIF of me highlighting a code snippet

Step 2: CodeSnapify it!
Right click your highlighted code snippet and click on where it says CodeSnap. On the right side of your screen, you'll see a screenshot of your code snippet on a colorful background.

A GIF of me right clicking on the highlighted code snippet and picking CodeSnap

Step 3: Save your screenshot

Go to the screenshot, right-click it, and pick Copy. Then, paste it to your Dev.to article.

A GIF showing the screenshot of my highlighted code snippet being copied

Volia! You got a colorful code snippet!

Explore more

Congratulations, you just learned two ways to turn your code snippets from technical but stiff to technical yet colorful! 😊 🎉 Now if you’re looking for other ways to take your code snippets to the next level, check out @get_pieces' app Pieces By Developer. Your mind will be amazed! 😊 Speaking of being amazed, check out my other content on Dev.to by giving me a follow! 😊

Also, check out the links below if you want to connect with me outside of Dev.to

🐦 Follow me on X(Twitter)

📝 Check out my other content on Hashnode

🫱🏾‍🫲🏻 Connect with me on Linkedin

Top comments (27)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Why didn't I know about Codesnap 😶
I remember designing the whole thing in Adobe XD for pasting the workflow code.

There is one more thing possible on DEV, it's just that I can't find the article that used it. It was a while ago, similar to the effect of the highlighter.

Between, Awesome article :)

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

Are you maybe referring to setting the language to diff for a triple tick block, then adding a + or - to the beginning of the line to highlight which lines are added/removed?

+ Added this line
-  Removed this line
Enter fullscreen mode Exit fullscreen mode
Collapse
 
cbid2 profile image
Christine Belzie

Was this question for me @terabytetiger? :)

Thread Thread
 
terabytetiger profile image
Tyler V. (he/him)

Sorry for the confusion- no, it's for Anmol regarding this line:

similar to the effect of the highlighter

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Nope, didn't knew this at all.
I was refering to this type of hightlighting.

But thanks for telling the diff type, I wasn't aware of that :)
Image description

Thread Thread
 
terabytetiger profile image
Tyler V. (he/him) • Edited

Oh, interesting - I don't think I've ever seen that in a post before!

According to this post you can do it with <mark> tags:

Thread Thread
 
anmolbaranwal profile image
Anmol Baranwal

Thank you for sharing :)
I think the list of options should be there in devto editor guide as well.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

I recently got to know to about this Carbon.now.sh but Codesnap seems more efficient. before this I used design the whole thing in figma or would prefer posting a screenshot.

Anyway, Nice article @cbid2 !!

Collapse
 
greenteaisgreat profile image
Nathan G Bornstein

Oh my HECK, I really wish I would've known about this sooner. I've always been posting screenshots of the code I want to share and then posting

let = 'this as my code';
let = 'if anyone wanted to copy/paste it';
Enter fullscreen mode Exit fullscreen mode

But now I know I can just do

const = 'this as my code snippets instead';
Enter fullscreen mode Exit fullscreen mode

So incredibly cool! Thank you so much!

Collapse
 
get_pieces profile image
Pieces 🌟

Awesome article! 🔥 And thanks for the mention ☺️

You can check out our official website at pieces.app/

Collapse
 
posandu profile image
Posandu

While CodeSnap has cool features like backgrounds, I suggest using code blocks instead of images of code because it's easy to copy-paste.

Collapse
 
cbid2 profile image
Christine Belzie

Good point there @posandu! 😊

Collapse
 
zeeshanali0704 profile image
ZeeshanAli-0704

Image description
How to create link like this to navigate to other post
Image description

Also how to create link like these?

Collapse
 
cherryramatis profile image
Cherry Ramatis

Most of my comments with the new articles here is about the syntax highlighting in code blocks, thanks for explaining it so well and also presenting the code snap extension, I didn’t know about 🫶

Collapse
 
abhi_1631 profile image
Abhijeet

Learnt a new stuff today . Thanks Christine :))

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Such a nice post !! Definitely hope it gets more traction because I have seen posts that would have benefited from it

Collapse
 
bcostaaa01 profile image
Bruno

Omg thank you so much for this!!🙏I will surely have a usage for this stuff in my future articles 👍 great article, Christine! 🙌

Collapse
 
bennyfmo_237 profile image
benny fmo

amazing, i am new to dev and markdown, your post just makes sense, i will do well to refer to them when writing my next article

Collapse
 
cbid2 profile image
Christine Belzie • Edited

Some comments may only be visible to logged-in visitors. Sign in to view all comments.