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:
📸 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
Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap.
Select the code you'd like to screenshot.
Adjust the width of the screenshot if desired.
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
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! 😊
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.
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?
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.
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 🫶
Hey there, tech enthusiasts! Are you ready to elevate your smartphone game to the next level? We're thrilled to announce our iPhone 15 Pro Max Giveaway, where you could be the lucky winner of the latest and greatest iPhone 15 Pro Max!
Here's how to enter for a chance to win:
🌟 Comment below and tell us why you deserve to win the iPhone 15 Pro Max.
🌟 Like this post.
🌟 Tag 3 friends who would love to win an iPhone 15 Pro Max too!
Bonus Entry:
🌟 Share this post on your storyand tag us for an extra entry!
That's it! You're officially entered into our giveaway. 🎁
📆 Giveaway ends April 02, 2024.
📆 The winner will be randomly selected and announced on April 02, 2024. Don't miss out on this incredible opportunity to get your hands on the most coveted smartphone of the year!
📆 Open to Special Eligibilty
Good luck to all participants! 🍀 #iPhoneProMax15 #Giveaway #TechEnthusiast #WinBig Win iPhone 15 Pro Max
Thanks for the guide @karsten_biedermann. 😊
I just wanted a more detailed explanation of method 1, especially for people unfamiliar with Markdown. Also, based on the responses, a lot of people seemed to have not known that they could use this technique to make their code snippets colorful, so sometimes the simplest thing is not always obvious. 😉
I'm still unable to get this. Can someone help me out. I am getting in black background with white text only. If I use codesnap I'm getting image instead of code.
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.