Table of Contents

• Flashback
• Method #1: Using backticks
• Method #2: Use CodeSnap
• Explore more

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:

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:

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 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>

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.

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 the right side of your screen, you'll see a screenshot of your code snippet on a colorful background.

Step 3: Save your screenshot

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

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! 😊

Christine Belzie Follow

Technical Writer| Open Source Maintainer | Coding Hobbyist

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