How to add color to your Dev.to article’s code snippets
Tags: howtodevto, beginners, writing, tutorial
Published: 2024-03-15 12:00:00

## Table of Contents 
{%- # TOC start (generated with https://github.com/derlin/bitdowntoc) -%}
- [Flashback](#flashback)
- [Method #1: Using backticks](#method-1-using-backticks)
- [Method #2: Use CodeSnap](#method-2-use-codesnap)
- [Explore more](#explore-more)

{%- # TOC end -%}

 


## 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](http://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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39t3nvex5mv8026nvcgt.png)


 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”**](https://chrissycodes.hashnode.dev/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](http://Dev.to), here’s how the top backtick will look:


![backtick with programming language's name next to it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ytqc3vc3ww2pkgpsbbw.png)




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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3qbd2vredhzmynhm43y.png)



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

```html
<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. 
{% github https://github.com/kufii/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 


![A GIF of me highlighting a code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayk8lgid2enhgbnuodq2.gif)


 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r73qnm27q6q9c9wk5pj.gif)




 Step 3: Save your screenshot 

 Go to the screenshot, right-click it, and pick **Copy.**  Then, paste it to your [Dev.to](http://Dev.to) article. 


![A GIF showing the screenshot of my highlighted code snippet being copied](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv0hzhgfsvecnbes9coz.gif)

 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](https://pieces.app/). Your mind will be amazed! 😊 Speaking of being amazed, check out my other content on Dev.to by giving me a follow! 😊

{% user cbid2  %}

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

{% cta https://twitter.com/CodesChrissy %} 🐦 Follow me on X(Twitter) {% endcta %}

{% cta https://chrissycodes.hashnode.dev %} 📝 Check out my other content on Hashnode {% endcta %} 

{% cta https://www.linkedin.com/in/christinebelzie %} 🫱🏾‍🫲🏻 Connect with me on Linkedin {% endcta %}