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 food makes your meal 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:

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” is HTML. So if I were to cross-post in the article to Dev.to, here’s how the top backtick will look:

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:

Step 3: 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>

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 take your code snippet’s color to the next level, I highly recommend using Code Snap.

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

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

Step 3: Save your screenshot

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

Volia! You got a colorful code snippet!

Explore more

There you have folks!  Two ways to add colorful code snippets your to Dev.to articles.
By incorporating these code snippet, you have turned your Dev.to articles 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